Front-end, Technology

Angular 9 to Angular 11 Upgrade: A step-by-step guide to keep your projects updated

A quick look at the Angular website will tell you that you could expect the following release cycle.

• A major release every 6 months
• 1-3 minor releases for each major release
• A patch release and pre-release (next or rc) build almost every week

Given Angular’s continuous improvement and frequent release of updates, it only makes sense for us to keep our Angular projects up to date. 

We took a step in that direction recently and updated an enterprise project from Angular 9 to Angular 11. By doing this, we enabled new features, carried out some bug fixes, and achieved optimization. This article is a written account of my recommendations and observations. I have also mentioned the links wherever necessary as a detailed reference.

My Update Process

Here are the parameters I took into consideration.

1. Reviewing what is new in Angular 11
2. Taking note of the Rendering engine changes
3. Removal of Deprecated APIs
4. Template checking

You could check out this link and this one for more details. But I have provided a summary below.

1. So first up, what’s new with Angular 11?

Angular 11 comes with:

• Performance improvement
• TypeScript 4.0
• Automatic font inlining
• Improved reporting and logging
• Deprecation of TSLint and move to ESLint
• Stricter types built-in pipes
• ISO week-numbering years formats support
• Updated hot module replacement(HMR) support

You could check out this blog for a detailed read.

2. Rendering Engine

In Angular 9, Ivy (the code name for Angular’s next-generation compilation and rendering pipeline) was optional. Now with Angular 11, it has become the default engine. You could check this guide for more information.  

3. Deprecated APIs and Removal   

With advances in the overall web ecosystem, some APIs and features become obsolete. They need to be replaced with new ones that embrace the latest best practices, changing dependencies, or changes in the (web) platform itself. Use this documentation to know more.

4.Template Checking

Like TypeScript catches type errors in your code, Angular checks the expressions and bindings in your application’s templates and reports errors. Angular currently has three modes of doing this, depending on the value of the “fullTemplateTypeCheck” and “strictTemplates” flags in the TypeScript configuration file.

My step-by-step process

1. Upgrade Node and Angular CLI globally

First, check your current Node version and Angular CLI version. 

For Node, we used the NVM (Node Version Manager) for maintaining node versions. 

By running the below command, you could update Node to its latest and stable version in Windows.

>> nvm list available      >> nvm install 14.15.4     >> nvm use 14.15.4

Upgrading Node helps us avoid vulnerability issues and upgrade to the latest stable NPM packages.

To find the latest stable version of Angular, use this Angular release update.

To install Angular 11 globally, use the following command.
npm install -g @angular/cli@11

To check the installed version, use the following command.
ng version

2. Update Angular version and package JSON Dependencies

In the last section, we completed the Angular 11 global installation. Now we are going to upgrade our existing application, which was developed in Angular 9.

If we run the below command in the project root path, Angular will get updated to version 11. 

 ng update @angular/cli @angular/core 

The ng update command automatically migrates the required packages and versions. 

The NPM update should also help you upgrade to the latest version of other Node module dependencies and update the Package.JSON file.

Ensure the vulnerability issue count is always ZERO, by using the npm audit. Or fix it using Node’s guidelines.

You could use this update note for more information on this step.

3. Move to ESLint 

Till now, TSLint was the most popular linting tool. But with its 11th version, Angular has moved from TSLint to ESLint. In a recent notification, Angular has also announced that it has stopped support for TSLint. Please use this code on GitHub to migrate from TSLint to ESLint. 

4. Unit Test cases and Testing

The last step is to check and test the unit test case, as the ng update command migrates all the files including .spec.ts. 

While testing, I checked for:

• Version-wise Browser-compatibility
• Mobile-compatibility and supported mobile browsers with versions 
• Unit test case

This will effectively complete the upgrading of your project from Angular 9 to Angular 11.

I hope you found this article useful. If you have any questions or feedback, please feel free to share them below.