So Angular 6 is out! It comes with many many exciting things, new tooling and easier ways to manage updates of dependencies.

Here's the official blog update

Here's the latest news from ngConf on Angular 6

The Angular CLI (now also updated to version 6 to match Angular) will make it make much simpler to update projects to future versions of Angular, by using ng update.

I’ve been updating all my side projects from Angular 4 or 5.2 to 6 just to see how the process went and it hasn’t been smooth but so far it’s all worked out.

The first thing you should do is check out the checkout the Angular update checklist.

Upgrading is just a few easy steps, but you might run into a hiccups so I’ll just discuss some of the bumps I ran into.

First, I had to update Angular CLI globally with:

> npm install -g @angular/cli

Here you can run ng -v and you should see:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.0
Node: 9.11.1
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.0
@angular-devkit/core         0.6.0
@angular-devkit/schematics   0.6.0
@schematics/angular          0.6.0
@schematics/update           0.6.0
rxjs                         6.1.0
typescript                   2.7.2

Then go into the project root folder and update the CLI there:

> ng update @angular/cli

Then update the angular core package:

> ng update @angular/core

If you are using Angular Material, be sure to update it as well:

> ng update @angular/material

While you are still inside your project’s root directory checkout how things are:

> ng -v 

should see: 

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.0
Node: 9.11.1
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.0
@angular-devkit/core         0.6.0
@angular-devkit/schematics   0.6.0
@schematics/angular          0.6.0
@schematics/update           0.6.0
rxjs                         6.1.0
typescript                   2.7.2

Here a few times in upgrading various projects, a few of the packages had <error> instead of a version, so I just re-ran the update scripts.

RxJS 6 Breaking Changes

The checklist provides an install script for RxJs 6, but it didn’t work for me no matter what I tried.

With Angular 6, we get the latest RxJs 6, which contains breaking changes to some import paths. So if you want to have the old imports to still work or can’t make this portion of the update to work, then to make it simpler to upgrade your application, you can install the following compatibility module:

> npm i rxjs-compat

All in all, updating was relatively painless but it’s interesting to see immediately the effect on my smaller projects. For example, None of them are showing the loading spinner because the projects are bootstrapped and served up so quickly.

Enjoy everyone…I know my weekend is ruined as I’m going to be up to my eyeballs in Angular!

Quick note: remember to push your most up to date local changes to a repo before starting the update process so that you can recover in case updating goes wrong.