How to Migrate from angular 5 to 6

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/core, @angular/common, @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 IVY is 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. 🤞

The full list of changelog can be found here, here and here.

One of the most important expectation from the developers who are using angular is to reduce the build time and also reduce the bytes.

ng serve output

In Angular6, it takes 6.8s (🔻) to build and 3.5MB (✅) bundle size for a basic app generated by angular-cli.

ng serve — aot

On the other hand, aot builds without minification and suppling prod flags takes around 7.1s (🔻) and 2.25MB (✅) bundle size.

ng serve — aot — prod

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.

Note the stats inside parenthesis they are the stats from angular 5

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,

  1. No JSON conversion
  2. Typed return values
  3. Typed interceptors
  4. 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.

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 😎


Written by

🚶explorer, learn ♻️ re-learn 📚 🎨 Design Solutions, 🎉 ❤️ Javascript, 👍 Java, 🦀 Rust, 👍 Go, Hacking on WebAssembly

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade