how to upgrade angular version to latest release (version 12)

Generally, angular's major versions are released in every 6 months and minor releases for 1-3, and a patch / pre-release build almost every week. The angular team tries to deliver at least two major versions in a year.

So angular developers should upgrade projects from time to time to get more supports in developing and managing a website.

Here we will discuss how to upgrade angular application from 6 / 7 / 8 / 9 to the latest 12.

Basically, we should upgrade versions step by step like as form 6 / 7 / 8 to 9, 9 to 10, 10 to 11, and 11 to 12

Before start upgrading your project, you should take your project's full back up with node_modules.
make sure you must required nodejs varsion greater than 12 so if your nodejs version is old then need to upgrade it first.

=>Upgrade Angular CLI globally  

First, need to update angular CLI to the latest if using an old version.

you can check the current angular CLI version from the following command

ng version

By running this command if you run this command inside the Angular project directory then you will get the Angular project’s version. If you run it outside Angular version then you will get global Angular CLI version.

first, check this global cli version which is currently used, Then run following commands to upgrade global angular cli version

npm uninstall -g @angular-cli
npm install -g @angular/cli@latest

Once Angular CLI has been upgraded globally, you can start to upgrade Angular project by following steps:

Step 1: Goto your current angular project

run following command to upgrade your older 6 / 7 / 8 project’s Angular version to 9

ng update @angular/core@9 @angular/cli@9
OR
ng update @angular/core@9 @angular/cli@9 --force --allow-dirty

if the first command throws an error then you can run 2nd command

if you are using angular material then need to run the following command otherwise skip it.

ng update @angular/material@9
OR
ng update @angular/material@9 --allow-dirty

if the first command throws an error then you can run 2nd command

Step 2 :

run following command to upgrade 9 project’s Angular version to 10

ng update @angular/core@10 @angular/cli@10
OR
ng update @angular/core@10 @angular/cli@10 --force --allow-dirty

if the first command throws an error then you can run 2nd command

if you are using angular material then need to run the following command otherwise skip it.

ng update @angular/material@10
OR
ng update @angular/material@10 --allow-dirty

if the first command throws an error then you can run 2nd command

Step 3 :

run following command to upgrade 10 project’s Angular version to 11

ng update @angular/core@11 @angular/cli@11
OR
ng update @angular/core@11 @angular/cli@11 --force --allow-dirty

if the first command throws an error then you can run 2nd command

if you are using angular material then need to run the following command otherwise skip it.

ng update @angular/material@11
OR
ng update @angular/material@11 --allow-dirty

if the first command throws an error then you can run 2nd command

Step 4 :

run following command to upgrade 11 project’s Angular version to 12 (latest)

ng update @angular/core @angular/cli
OR
ng update @angular/core @angular/cli --force --allow-dirty

if the first command throws an error then you can run 2nd command

if you are using angular material then need to run the following command otherwise skip it.

ng update @angular/material
OR
ng update @angular/material --allow-dirty --force

Step 5 :

Run following commands for upgrade @angular-devkit/build-angular

npm uninstall @angular-devkit/build-angular
npm install --save-dev @angular-devkit/build-angular

Step 6 :

Remove node_module directory and package_lock.json from the root directory

Re-install node_modules

npm install

Step 7 :

now run your angular project by using

ng serve

Now your project should run successfully but if our 3rd party modules are too old then you have to update those modules which throw errors and need to do related changes and fix issues.

if you got the following errors with many modules

CommonJS or AMD dependencies can cause optimization bailouts.
Review following links :
https://angular.io/guide/build#configuring-commonjs-dependencies
https://stackoverflow.com/questions/62592903/upgrading-to-angular-10-fix-commonjs-or-amd-dependencies-can-cause-optimizatio
Add in angular.json build->options
    "allowedCommonJsDependencies": [
              "lodash",
              "crypto-js",
              "moment-timezone",
              "crypto-js/hmac-md5",
              "crypto-js/hmac-sha1"
            ],

you need to add your modules in this allowedCommonJsDependencies options.

Hope, This article is useful for you to upgrade angular versions from time to time and stay your project in the latest.