How to upgrade Angular application to Angular 12 or Latest Version

Angular releases its new versions 612 months after the previous release version, so we need to update our Angular application to the latest version so that we can take advantage of the new features released in the latest version, it is a very simple process and simple steps too obey. update our Angular application to the latest version if we had already updated our application to the previous version and our application is not running on a very old version of Angular, but it will take some time if your application is running on the old Angular version Time and you need a change in your Angular code to upgrade to the latest Angular version listed the steps to upgrade to Angular version 12-

Steps to Upgrade your Angular application to Angular 12 or Latest Version

Following is the list of software requirement when we are upgrading our Angular application to Angular 12 or Latest version, we require Node.js, Typescript and Angular CLI installed on the machine. Following are the versions we require to proceed with Angular 12 application.

Node.js: Version 12 or later

Typescript: 4.2

Angular CLI: 12

Step 1:

Download & Install Latest Node.js version from : https://nodejs.org/en/download/

Step 2:

Upgrade Typescript to latest version using following npm command:

npm install -g typescript

Need Help? visit - https://bit.ly/2UeHHNM

Step 3:

Now, we will upgrade Angular version installed on the machine to latest Angular Version using below npm command:

npm install -g @angular/cli

Step 4:

Now we will upgrade your actual Angular application, for that we will be upgrading Angular CLI to Latest Angular CLI version, in our case we will be upgrading it to Angular/CLI@12

Open the command prompt and change directory to your Angular Project Location and check the Angular version using following command:

ng version

Note: Make sure you have a backup of the project before upgrading the Angular version so that if something goes wrong in the code after the update, you can roll back the update or use the backup.

Angular to Angular 12, you receive the following error message:

"Updating multiple major versions at once is not recommended. Run 'ng update @angular/cli@6' in your workspace directory to update to latest '6.x' version of '@angular/cli'"

Also, while running ng update command, if it gives "Repository is not clean. Please commit or stash any changes before updating" error, then append --allow-dirty to the ng update command.

In our case we installed Angular 5 in the project, now we update our application first to Angular 6, then Angular 6 to Angular 7, then Angular 7 to Angular 8, then Angular 8 to Angular 9:

ng update @angular/core@6 @angular/cli@6 --allow-dirty --force
ng update @angular/core@7 @angular/cli@7 --allow-dirty --force
ng update @angular/core@8 @angular/cli@8 --allow-dirty --force
ng update @angular/core@9 @angular/cli@9 --allow-dirty --force
ng update @angular/core@10 @angular/cli@10 --allow-dirty --force
ng update @angular/core@11 @angular/cli@11 --allow-dirty --force

Now, we have upgraded our Angular application to Angular 11, so we will run the below command to upgrade to latest Angular 12 version:

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

We can check the ng version of the application, by running the following command:

ng version

Lets get discuss!!!

Hire me at https://bit.ly/3rb1GJl
contact [email protected]