Update to Angular 9 in 6 easy steps

Angular launched its 9th version on Feb 7, 2020. Follow the steps below to move from Angular 8.0 -> Angular 9.0

Pre-Requisites

• If you are using lazy loading make sure you use dynamic imports. Usually an Angular 8 user will already be using the dynamic imports.

const routes: Routes = [{ path: 'lazy',
  // The old syntax for loadChildren is deprecated
  // loadChildren: './lazy/lazy.module#LazyModule'
  // The new import() syntax is
  loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];

Update to 9 – Now follow the 6 easy steps below to update to Angular 9:

• Step 1: Make sure you are using Node 10.13 or later version. You can check this by command

node -v

• Step 2: First update your angular to the latest version of Angular 8.x of angular core and cli before updating to Angular 9. For this, navigate to your workspace and run below command

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

If you get this error, Repository is not clean. Please commit or stash any changes before updating. Make sure your github changes are committed and then retry with this command

ng update @angular/core@8 @angular/cli@8 –allow-dirty

• Step 3: Update your application to the latest version Angular 9 and TypeScript 3.7 using the below command:

ng update @angular/core @angular/cli –allow-dirty

• Step 4: Update any angular libraries like material if you are using using the ng update command. You can also check for outdated libraries using npm outdated. All the code migrations from are automatically taken care off. To know more about the changes and deprecation’s in Version 9, check this blog.
• Step 5: If you are using many angular libraries, you can speed up your build by invoking Angular Compatibility Compiler called ngcc. This can be added in a npm postinstall scripts by adding below code in package.json

{
"scripts": {
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
}
}

• Step 6: If your application or one of its dependencies is using Angular’s internationlization, you have to add $localize() function using below command. Localize supports i18n of messages in Ivy applications

ng add @angular/localize