How to downgrade angular version?

Question

My current version is 13. I need the version 12.

I tried the following commands:

• ng --version
• npm uninstall -g @angular/cli
• npm cache clean --force
• npm install -g @angular/cli@12
• ng --version

The version still says 13. How can i resolve this?

Answer 1

You need to do a few things to downgrade safely.

1. consult the version of nodejs, and angular cli you need here.
2. create a new angular project just to serve as reference.

From a base folder install loacaly the angular 12.x compatible version of the cli:

npm install @angular/[email protected]

a package.json file will be added, add to it the ng script:

{
  "scripts": {
    "ng": "ng"
  },
  "dependencies": {
    "@angular/cli": "12.0"
  }
}

Install angular with this local angular/cli (using default options):

npm run ng new ref-app

now from your app's folder:

1. delete the node_modules folder
2. open your app's package.json file and replace all versions of @angular/xxx packages with the versions you can find in the ref-app's package.json file from the first steps
3. run npm install

At this stage, angular packages will be certainly downgraded to v 12.0; Now you might have to fix your app if you ran upgrade scrips on it (to get it to v13). In this it is hard to advise as every app will have different issues for a downgrade.

finally, if you'd like to have your global "ng" also downgraded:

1. uninstall it:

npm uninstall -g @angular/cli

2. install it in the targeted version

npm install -g @angular/[email protected]

Answer 2

Depending on the size of the project, it may not be as straightforward as the following, but most of the time this will do:

1. Commit changes, so you have a checkpoint.
2. Delete project/node_modules.
3. Delete project/package-lock.json.
4. Modify package.json for @angular and related packages'.
5. Run npm i to install.
6. Confirm app compiles without errors. Follow up npm audit to discover suggestions.

All angular packages follow main version denominator - meaning if you want to downgrade to Angular 15 -> Angular 14, all @angular packages should start with 14. Thankfully, most larger, well-known packages tend to follow the pattern e.g. @ngrx. We're using caret ^ to install the latest minor version.

From package.json

"dependencies": {
    "@angular/animations": "^15.0.4",
    "@angular/cdk": "^15.0.4",
    "@angular/common": "^15.0.4",
    "@angular/compiler": "^15.0.4",
    "@angular/forms": "^15.0.4",
    "@angular/material": "^15.0.0",
    "@ngrx/effects": "^15.1.0",
    "@ngrx/store-devtools": "^15.1.0",
...

To package.json

"dependencies": {
    "@angular/animations": "^14.0.0",
    "@angular/cdk": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/material": "^14.0.0",
    "@ngrx/effects": "^14.0.0",
    "@ngrx/store-devtools": "^14.0.0"
...