How to upgrade to Angular 9

Angular released it's 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 lookhere to understand the important enhancements in the 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 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 below steps and make sure your working directory is well versioned using git and create a new branch all together 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,

Step 2): Run 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 re install the global angular cli npm uninstall -g @angular/cli andnpm install -g @angular/cli and try again

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

Please comment below, if you face any other problems while upgrading, so that we can help you !!