How to upgrade to Angular 9



Angular released its most anticipated rendering engine IVY along with Angular 9, if you are not aware of what has been changed in Angular 9 you can take look here to understand the important enhancements in Angular 9 and if you want to compare the performance of Angular 8 and Angular 9, you can check it out here

Now, in this section we will understand how to upgrade to Angular 9 from the previous version of Angular, initially, it was a bit difficult for developers to upgrade Angular project, but now the Angular team made developers life very easy by automating the schematics changes required during the process of upgrade.

Prerequisites:

  • Node.js version 10.13 or above
  • You have versioned controlled your branch and the branch is clean (This prerequisite for the safer side)

All you must do is follow the below steps and make sure your working directory is well versioned using git and create a new branch altogether before the start of the upgrade

Step1): Run the below command, which is required to align changes that are brought in the last version of Angular, which is a mandatory step before going to the next step,

ng update @angular/core@8 @angular/cli@8

Step 2): Run the below command to upgrade to the latest version of Angular and you can use the argument -C so that automatically the changes will be committed for you in the repository and if this step is successful, you should be seeing the message asYour project has been updated to Angular version 9!

ng update @angular/core @angular/cli

Step3): This step is required only if you are using Angular Material components

ng update @angular/material

Step4): This step is required only if you are using Angular Universal Express Engine

ng update @nguniversal/express-engine

What errors/problems you may face during the upgrade and how to solve?

Problem 1): When the complexity of the project is very huge, it takes enormous time as it ng update command will perform many changes required based on the project, and sometimes it may take around 20 mins also, so all you have to do is wait with some patience

Problem 2): If your Angular project has Angular material libraries used then you may face the issue that An unhandled exception occurred: Cannot find module @schematics/angular/third_party/github.com/Microsoft/TypeScript/lib/typescript, so this probably because either you global angular cli is causing the issue or you are missing schematics library so during that step you revert the changes done and install npm package npm i -g @schematics/angular and reinstall the global angular cli npm uninstall -g @angular/cli and npm install -g @angular/cli and try again

Problem 3) If you face any error mentioning incompatible peer dependencies found then you can consider using the optional argument --force to upgrade so that the ng update will ignore the dependencies versions

0
0