The Angular 6 was released. It is time for all of our ngx-* projects to upgrade to angular 6 and live on the edge.
This release focused on improving the toolchain. It is also important to note that along with
@angular/compiler, etc., now Angular-CLI and Angular-Material + CDK were released as
v6.0.0. So no more confusion with the versions across various libraries.
The all new and exciting
IVYis not a part of this release. If you are expecting this after watching
ngconf, it might be disappointing for you😞. But don’t worry, it is still under development and can expect it in the next version. 🤞
One of the most important expectation from the developers who are using angular is to reduce the build time and also reduce the bytes.
In Angular6, it takes 6.8s (🔻) to build and 3.5MB (✅) bundle size for a basic app generated by angular-cli.
On the other hand, aot builds without minification and suppling prod flags takes around 7.1s (🔻) and 2.25MB (✅) bundle size.
With — prod flag, it takes around 17s to build and the bundle size is around 296KB
There is a significant increase in the build time, but the bundle size is also increased in the basic app by 2x.
If you are tired of regular benchmarks with angular cli generated app and interested in more of a real-world complex application example, here we go.
For this example, as we did before, we will take a sample JHipster application, share our story of what we did to migrate to angular 6.
generator-jhipster - Open Source application generator for creating Spring Boot + Angular/React projects in seconds!
If you haven’t heard about JHipster, you should definitely check it here. If you are (dream of) doing full stack development and interested to learn the newest technology and also how to do things faster and more awesome you should check out here.
You can find the bundle differences between angular4, angular 5 and angular6 below,
There is an overall decrease in the bundle size. But the bundle time is increased.
First, of all, before migrating you should use this amazing website. This neatly lists down what are the things that we need to consider when we migrate from angular 5.2 to 6 (of course from any version to any version in angular).
Have you ever worried about the boilerplate kind of stuffs that you have to do for converting your
JSONbefore reading your response?
Now Angular comes bundled with
HttpClient. It is a replacement of
Http. Following are the advantages of using the new
- No JSON conversion
- Typed return values
- Typed interceptors
- More clear interceptors definition
Important to note that, Angular 6 supports Node 8 and later. If you are still using Node 6, then you have to wait to make this update till you upgrade your infra to Node 8.
ng update is a new command available in angular-cli that reads your package.json and suggests you what you need to do for the update of the new version of Angular. This is really helpful since it also suggests the libraries and their dependencies versions, which makes life easier.
Note that, with Angular 6 you need to update your RxJS to version 6. Note that RxJS6 is a major rewrite of the library. You can see more information here. Beware of the path and import changes 🌩
✨ Pipeline operator is available ✨🔥
ng add is another new command available in angular-cli. It helps you to add the dependencies to the applications. So, to include ng-bootstrap, you can just say
ng add @ng-bootstrap/schematics. This will go and fetch the exact version of ng-bootstrap library supported by your angular application.
Check out this PR, that migrated JHipster’s code from Angular 5 to 6. https://github.com/jhipster/generator-jhipster/pull/7582
This version also supports workspaces in CLI. So you can have multiple packages together in a single workspace. For more information here
template tags. (Note:
template tags are deprecated in Angular 5)
animations are moved into
Other exciting things to notice are
Why would you update to Angular 6?
- Bundle size is reduced
- Angular code is more modular
- One step closer to
Why you should take some time and think?
- Build time is longer than compared with Angular 5 (Note: it is a rough benchmark performed at high level.)
Happy Hacking 😎