A quick look at the Angular website will tell you that you could expect the following release cycle.
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 to a better understanding of how to update Angular 9 to Angular 11.
Here are the parameters I took into consideration.
You could check out this link and this one for more details. But I have provided a summary below.
Angular 11 comes with:
You could check out this blog for a detailed read.
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.
With advances in the overall web ecosystem, some custom-software-development 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.
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.
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 update Angular CLI 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
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, we will upgrade Angular to version Angular 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.
Till now, TSLint was the most popular linting tool. But with the Angular 11 version, there was a transition 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:
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 about Angular Update, please feel free to share them below.
.png)
