How to upgrade Angular 2/4/5 application to Angular 6

Friends you might be well aware that Angular 6 has come and true to its every release it has come with a lot of wonderful features. The new features include but not limited to updating the packages automatically, in built support for material designs and the CKD, ng add, better tree-shakability, CLI workspace and a couple of more which we will discuss in the coming articles. For this part I thought of writing about how to upgrade angular 2/4/5 application to angular 6. This is basically a very small article with some commands that will auto magically upgrade your application to the latest version of angular i.e, Angular 6.

Prerequisite:
Your machine should have node version 8.9.1 and above. Otherwise the CLI will not get installed. So if the node version installed in your local machine is below 8.9, then go to here and download the latest node installer and install it.

Step1:
In first step install angular CLI globally.

npm install -g @angular/cli

The above command will upgrade the globally installed angular CLI to the latest version i.e version6. The earlier major version of the CLI was 1.7. Now it will be upgraded to version 6.

Step2:
The second step involves upgrading the local angular/cli version to V6. This up gradation is only for the current project where you can verify the package.json file for the version of CLI.Run the command.

npm install @angular/cli

Step3:
In this step we are going to get rid of the old angular-cli.json file and a new file named angular.json will be created for the same purpose which angular-cli.json was serving. So the command will be

ng update @angular/cli

Here we encounter the first Angular 6 command i.e the ng update. A brief description of this new command is given in the following step.

Step4:
In this step we are going to update all other packages which are upgraded according to the new release of
Angular6, including the rxjs package. We will be using the ng update command here and it will automagically
scan the package.json file and upgrade the dependencies without having to manually update them. The command is

ng update @angular/core

Step5:
RxJS v6 has major changes from v5, v6 brings backwards compatibility package rxjs-compat that will keep your applications working, but you should refactor TypeScript code so that it doesn’t depend on rxjs-compat.
For the same run following:

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

This command can save you from getting some rxjs errors when it is updated to version6.

Step6:
Upgrade other packages which are dependent on rxjs and then run the following command to uninstall the rxjs-compat
so as to reduce the bundle size.

npm uninstall rxjs-compat

Step7:
Now serve your application and hopefully everything is working as expected.

In the subsequent articles I will try to dig deeper into the new features Angular 6 is providing.

Satyapriya Mishra is a Software Engineer who has a deep love for JavaScript frameworks. He can be reached here.