How to upgrade angular 4 to angular 5?

How to upgrade angular 4 to angular 5?

In this article, we are going to see how to upgrade from angular 4 to angular 5.

 

Do remember, you will be able to see the angular core/http/common/router etc versions if you check only inside the angular projects.

To Update Angular CLI:

 

The CLI can be updated by,

Uninstalling old version -> npm uninstall -g @angular/cli

And Installing the new one -> npm install -g @angular/cli

 

If you update the Angular CLI  then it will automatically get Angular 5 projects when running

ng new your-project-name

 

You can also copy paste the src/app folder, compare and move the changes from angular-cli.json and package.json files to your angular 5 makes the upgrade quiet easy.

 

If you check outside of any folder, then only below details will be displayed,

 

 

 

 

Before upgrade (versions are angular 4):

 

 

 

Command to upgrade to angular 5:

 

npm install @angular/animations@^5.0.0 @angular/common@^5.0.0 @angular/compiler@^5.0.0 @angular/compiler-cli@^5.0.0 @angular/core@^5.0.0 @angular/forms@^5.0.0 @angular/http@^5.0.0 @angular/platform-browser@^5.0.0 @angular/platform-browser-dynamic@^5.0.0 @angular/platform-server@^5.0.0 @angular/router@^5.0.0 typescript@2.4.2 rxjs@^5.5.2

 

Ensure you have also upgraded typescipt to 2.4+: 

This command to upgrade only to typescript to 2.4.2. Previous command itself upgraded angular and rxjs supported versions.

npm install typescript@2.4.2 –save-exact

 

 

After upgrade (angular versions are 5) :

 

Here language-service refers still 4.4.6 only you can run the below command to upgrade this particular angular package also to angular 5.

npm install @angular/language-service@5.0.0

 

Upgrade angular-cli also,

npm install -s @angular/cli@1.5 / npm install -s @angular/cli@latest

 

Now ng–version gives,

 

 

You can find more information on upgrade here.