How to Migrate from angular 5 to 6
Tags: Front End Development, Angular 6, Angular Cli, JavaScript, Angular

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.

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 JSON before reading your response?

Now Angular comes bundled with HttpClientModule and HttpClient . It is a replacement of HttpModule and Http . Following are the advantages of using the new HttpClientModule ,

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.

If you were at ng-conf or saw ng-conf videos then you might have heard about schematics already. With that angular-cli.json will have a new format with version: 1 . More info here

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

No more template tags. (Note: template tags are deprecated in Angular 5)

animations are moved into @angular/animations from @angular/core .

Other exciting things to notice are

Angular Elements — Check out here

Angular Material & Starter components — Check out here

Why would you update to Angular 6?

Bundle size is reduced

Angular code is more modular

One step closer to ivy

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 😎