Angular Libraries

With Angular 4 the team has released Angular Package Format specification. It is well documented and always up to date, you can check it here.
Be aware — it is pretty detailed. Don’t drawn in information flood.

Few worth to give-a-try solutions or generators:

For the record: also worth-to-check solutions:

Of course working on project combined from yours published on npm or local repo, or only repository-internal packages comes with few problems. For example debugging or modifying multiple depends packages at once with easy sync in our project.

Of course npm link is for the rescue, but there are few hints for you:

If you want to setup private npm repository

Last topic covered during this speech — if you write a lot of repeatable Angular code it would be nice to have a generator for that.
You can write your own templates for angular/cli with schematics.
If you’re familiar with T4 templates or similar solution, you will fell like home.

Its still young project so hold your horses and your fingers crossed, little more about schematics usage you will find on angular in depth.

Link to repository.

Angular JSON Schema Form builder

An Angular JSON Schema Form builder for Angular 4 and 5, similar to, and mostly API compatible with, Angular Schema FormReact JSON Schema Form, and JSON Form.
Choose an example, or create your own, and check out the generated form.

Demo: https://angular2-json-schema-form.firebaseapp.com/

Code: https://github.com/dschnelldavis/angular2-json-schema-form?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

Automate versioning, changelog and publish of your NPM packages

ref: https://medium.com/@tomastrajan/6-best-practices-pro-tips-for-angular-cli-better-developer-experience-7b328bc9db81

Writing changelog manually would be extremely tedious error prone task so it is the best to automate that process instead. There are many available tools which can do the job but let’s focus on standard-version.

This tool automatically generates and updates CHANGELOG.md file with all the commits following Conventional Commits specification and correctly determines new version of our project.

Conventional commit defines mandatory type, optional (scope): followed by the commit message. It is also possible to add optional body and footer, both separated by a blank line. Let’s see how does that look in practice by checking an example of full commit message of ngx-model library.

fix(dependency): multiple versions of rxjs in single project (TS90010)
BREAKING CHANGE: rxjs is now peerDependency instead of dependency
closes #1

Standard version will correctly bump MAJOR version of the project because of the presence of BREAKING CHANGE keyword in the commit body.

The generated CHANGELOG.md will then look something like this….

Example of CHANGELOG.md file generated by standard-version library

Looks sweet! So how can we use this in our project?

We start by installing npm install -D standard-version to save it in our devDependencies and add "release": "standard-version" to our package.json scripts.

We can also add git push and npm publish to automate the whole process. In this case we will end up with "release": "standard-version && git push — follow-tags origin master && npm publish".

AppShell with Angular CLI 1.6

ref: https://github.com/angular/angular-cli/commit/8c0779f

App Shell is an architecture that focuses on providing an instant-loading experience to users by rendering a “shell” of an application immediately when the first document is returned from the server, before any other assets have loaded. Read more about it on developers.google.com.

ref: https://github.com/angular/mobile-toolkit/blob/master/guides/app-shell.md

Also See: https://medium.com/@tomastrajan/how-to-style-angular-application-loading-with-angular-cli-like-a-boss-cdd4f5358554