Angular Version Upgrade: A quick guide to upgrade from 9.0 to 12.0

One of the best engineering practices is to always keep your application's core frameworks up-to-date with the latest available versions. Sometimes the version upgrades are missed due to other high-priority commitments and each upgrade missed adds to the technical debt with compound interest (fun intended) which should be treated rather sooner than later.

The below step-by-step details will take you through the journey of angular version upgrade from version9.0 to version12.0 that we recently went through. The details include those extra checks/fixes which we learned the hard way and would like to share with the community.

Upgrade from Version9.0 to Versio10.0

1. If your app uses the Globalization & Localization feature, in short, contains i18n, this step is for you. Execute the below command through PowerShell and once completed please perform a code commit.

ng add @angular/localize

2. The next precautionary step before upgrade to version 10.0 is to ensure tsconfig.json does not contain any unnecessary punctuations like an inadvertently added unnecessary comma. For example, at the end of the last property of an object which did not need a comma.

{
  "commaSampleObject": {
    "propertyNeedsComma": "PutCommaBeforeNextProperty",
    "propertyNoNeedOfComma": "RemoveTheCommaAtTheEnd",
  } 
}
}

3. Perform an upgrade to angular's core and cli modules to version10.0 from the current version. The --force switch at the end is recommended based on personal experience. In the absence of --force one might need to manually address the incompatible-peer-dependency issue of all problematic packages individually. Please perform a code commit after this command.

ng update @angular/core@10 @angular/cli@10 --force

4. The upgrade performs the following actions on your solution :

• Updating package.json with dependency
• Executing migrations of package '@angular/cli'
• Update Browserslist configuration file name to '.browserslistrc' from deprecated 'browserslist'
• Update tslint to version 6 and adjust rules to maintain existing behavior.
• Remove deprecated 'es5BrowserSupport' browser builder option.
• The inclusion for ES5 polyfills will be determined from the browsers listed in the browserslist configuration.
• Replace deprecated and removed 'styleext' and 'spec' Angular schematic options with 'style' and 'skipTests', respectively.
• Remove deprecated options from 'angular.json' that are no longer present in v10.
• Add the tslint deprecation rule to tslint JSON configuration files and update library projects to use tslib version 2 as a direct dependency.
• Update workspace dependencies to match a new v10 project.
• Update 'module' and 'target' TypeScript compiler options.
• Removing "Solution Style" TypeScript configuration file support.
• Executing migrations of package '@angular/core'
• Missing @Injectable and incomplete provider definition migration. As of Angular 9, enforcement of @Injectable decorators for DI is a bit stricter and incomplete provider definitions behave differently.
• ModuleWithProviders migration. As of Angular 10, the ModuleWithProviders type requires a generic. This migration adds the generic where it is missing.
• Undecorated classes with Angular features migration. In version 10, classes that use Angular features and do not have an Angular decorator are no longer supported.

5. If you are using material, please perform an upgrade to material as well. --force ensures that incompatible peer dependencies are taken care of. Ensure to perform a code commit before proceeding with the next version.

ng update @angular/material@10 --force

Upgrade from Version10.0 to Version11.0

1. Perform an upgrade to angular's core and cli modules to version11.0 from the current version. The --force switch at the end is recommended based on personal experience. In the absence of --force one might need to manually address the incompatible-peer-dependency issue of all problematic packages individually. Please execute a code commit after this step.

ng update @angular/core@11 @angular/cli@11

2. The upgrade performs the following actions on the solutions:

• Updating package.json with dependency
• Executing migrations of package '@angular/cli'
• Replace deprecated library builder '@angular-devkit/build-ng-packagr'
• Add 'declarationMap' compiler options for non production library builds.
• Remove deprecated options from 'angular.json' that are no longer present in v11.
• Update workspace dependencies to match a new v11 project.
• Support for IE9, IE10, and IE mobile has been removed. This was announced in the v10 update.

3. The above upgrade might return this exception : "An unhandled exception occurred: Cannot find module '@angular-devkit/core'". This can be addressed as follows :

• Update package.json file and replace "@angular/cli": "~ with "@angular/cli": "^
• Run the command posted below and perform code commit.

npm install @angular-devkit/core --save-dev

4. If your application uses @material, perform an upgrade and ensure you perform code commit before proceeding with further steps.

ng update @angular/material

Upgrade from Version11.0 to Version12.0

1. Perform an upgrade to angular's core and cli modules to version12.0 from the current version. The --force switch at the end is recommended based on personal experience. In the absence of --force one might need to manually address the incompatible-peer-dependency issue of all problematic packages individually. Please execute a code commit after this step.

ng update @angular/core@12 @angular/cli@12

2. The upgrade performs the following actions on the solutions:

• Updating package.json with dependency
• IE11 support is deprecated.
• Update 'zone.js' to version 0.11.x
• Remove 'emitDecoratorMetadata' TypeScript compiler option. Decorator metadata is no longer needed by Angular.
• Lazy loading syntax migration. Update lazy loading string syntax to use dynamic imports.
• Remove deprecated ViewEngine-based i18n build and extract options. Options present in the configuration will be converted to use non-deprecated options.
• Updates Web Worker consumer usage to use the new syntax supported directly by Webpack 5.
• Remove invalid 'skipTests' option in '@schematics/angular:module' Angular schematic options.

3. If your application uses @material, perform an upgrade and ensure you perform code commit before proceeding with further steps. This step might not be required because Version11.0 upgrade coverted for it already. However if we didn't upgrade previously, we recommend upgrading at this stage.

ng update @angular/material --force

4. At this point we should try a final build to ensure nothing breaks.

ng build --project=xxxxxx