Post
Ask Question

How to Upgrade Angular Versions?

Introduction

Hi All, Today, I come up with Angular version upgrade details.

Some of us working on the Angular Projects, which are of the versions below 10. Upgrade Angular upgrade of those projects or repos is not an easy task. It may be an easy task if our project doesn't have many imported modules. But if our project has many imported modules and among those, if they have dependencies with angular/core or angular/cli or other modules, then while upgrading angular, we will get many errors like errors with Peer Dependencies. So Normally, what I should suggest is while upgrading angular from version to version, please check whether all your modules in your package.json file are supported with your existing version, even if any module version is a higher or lower version of angular/core or angular/cli then we will get peer dependency errors. First, I will list down the commands to upgrade version-wise. As I did an angular upgrade from version 6 to 14, so I am gonna list the files which can be affected while we do the angular upgrade.

So we can upgrade Angular Version directly from the lower version to the latest version of our project but if the project doesn't have any third-party modules or unsupported or deprecated Modules. If we check the Official website for angular upgrade from a lower version to a higher version, it mentions upgrading version to version only.

To update the angular version directly. First, you can create a project with the version you want to upgrade your repo. After creating the project, then that project's package.json file and angular.json files contain data or module details of the latest version of angular. Here what we can do is we can take or copy the package.json file, angular.json file,tsconfig.json and copy the node_modules folder. And paste in the repo or project in which you want to upgrade the version at their respective paths. Once you pasted the files and folder, open your project and run the command "npm i". Then it will update the package-lock.json file, so with this now, your project becomes upgraded to the latest version...

Note. Here you can follow the above process if your project has basic default modules which are required to run a normal project. And also, if you don't use spec files in the project.

Below, I will discuss From Angular 6 to Angular 14 Upgrade.

Angular 6 to Angular 7

Before Upgrading Angular 6 to Angular 7, if you are using httpModule, node-sass, replace this module with httpClient Module, Sass, and do changes wherever you have used this module. Next, run the command " cmd /C "set "NG_DISABLE_VERSION_CHECK=1" && npx @angular/cli@7 update @angular/cli@7 @angular/core@7". After this, you need to manually update the CDK module and material module to 7. Once you executed that command successfully below files will be updated.

  1. package-lock.json
  2. Package.json
  3. polyfills.ts
  4. tsconfig.json

To check the angular version, run ng v or ng version

Angular 7 to Angular 8

Now to upgrade to angular 8, we can directly run the below command.

/C "set "NG_DISABLE_VERSION_CHECK=1" && npx @angular/cli@8 update @angular/cli@8 @angular/core@8"

If you get any errors like peer dependencies, make sure to update those modules to the required version. once you do that again, run the above command once again, then those issues will be resolved. once it is upgraded successfully Below files are updated.

  1. Package.json
  2. Package-lock.json
  3. tsconfig.json and ts files in which if you use @viewchild decorator

Once it is done, update your CDK and material modules to 8 versions. Then it is done.

Angular 8 to Angular 9

Here directly, we can run the command cmd /C "set "NG_DISABLE_VERSION_CHECK=1" && npx @angular/cli@9 update @angular/cli@9 @angular/core@9".

If it is executed or upgraded successfully without any errors, then the following files are updated.

  1. Package.json
  2. Package-lock.json
  3. tsconfig.app.json,4)angular.json and ts files in which if you use @viewchild decorator

Once it is done, update your CDK and material modules to 9 versions. Then it is done.

Angular 9 to Angular 10

Before doing this, make sure you install node version 16.14.

After that, run the command: npx @angular/cli@10 update @angular/core@10 @angular/cli@10.

If it is successfully executed, then the below files are updated.

  1. Package.json
  2. Package-lock.json
  3. tsconfig.json
  4. tslint.json and
  5. browserslist file will be renamed as browserslistrc

Then once it is done, update your CDK and material modules to 10 versions. Then it is done.

Angular 10 to Angular 11

Here you can directly run the command: "ng update @angular/core@11 @angular/cli@11".

If it is successfully executed, then the below files are updated.

  1. Package.json
  2. Package-lock.json
  3. angular.json
  4. app.routing.ts and all the spec.ts files will be modified.

Then update angular/cdk and material module to 11, then it's done.

Angular 11 to Angular 12

Here you can directly run the command: "ng update @angular/core@12 @angular/cli@12".

If it is successfully executed, then the below files are updated:

  1. Package.json
  2. Package-lock.json
  3. angular.json
  4. Polyfills.ts 5)test.ts 6)tsconfig.json and environment files.

Then update angular/cdk and material module to 12, then it's done.

Angular 12 to Angular 13

Here you can run the command "ng update @angular/core@13 @angular/cli@13" :

If it is successfully executed, then the below files are updated.

  1. Package.json
  2. Package-lock.json
  3. angular.json
  4. Polyfills.ts 5)test.ts 6).gitignore

Then update angular/cdk and material module to 13, then it's done.

Angular 13 to Angular 14

Here nothing to do. Just run the command " ng update @angular/core@14 @angular/cli@14"

If it is successfully executed, then the below files are updated.

  1. Package.json
  2. Package-lock.json
  3. angular.json
  4. tsconfig.json and some ts files if you are using form builder.

Then update angular/cdk and material module to 14, then it's done.

Note. If you are getting 'Peer dependencies errors while upgrading, then upgrade those mentioned modules to the respective angular core supported versions and then continue the upgrade. And also, check the node.js version.

Once you upgrade to one version, you can run the command npm I to take the latest from the package.json file.

This is the end. By this flow, you can upgrade your Angular Version to the latest.
Next Recommended Reading Angular Error Handling When Installing Angular Material Latest Version