Unable to upgrade from angular 12 to angular 13

Question

I've an Angular 12 app, which I'm trying to upgrade to angular 13.

According to https://update.angular.io/?l=2&v=12.0-13.0 I should run:

npx @angular/cli@13 update @angular/core@13 @angular/cli@13

But when I do, I get the following error:

npx @angular/cli@13 update @angular/core@13 @angular/cli@13
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
✔ Package successfully installed.
Using package manager: 'npm'
Collecting installed dependencies...
Found 38 dependencies.
Fetching dependency metadata from registry...
    Updating package.json with dependency @angular-devkit/build-angular @ "13.0.2" (was "12.1.1")...
    Updating package.json with dependency @angular/cli @ "13.0.2" (was "12.1.1")...
    Updating package.json with dependency @angular/compiler-cli @ "13.0.1" (was "12.1.1")...
    Updating package.json with dependency typescript @ "4.4.4" (was "4.3.5")...
    Updating package.json with dependency @angular/animations @ "13.0.1" (was "12.1.1")...
    Updating package.json with dependency @angular/common @ "13.0.1" (was "12.1.1")...
    Updating package.json with dependency @angular/compiler @ "13.0.1" (was "12.1.1")...
    Updating package.json with dependency @angular/core @ "13.0.1" (was "12.1.1")...
    Updating package.json with dependency @angular/forms @ "13.0.1" (was "12.1.1")...
    Updating package.json with dependency @angular/platform-browser @ "13.0.1" (was "12.1.1")...
    Updating package.json with dependency @angular/platform-browser-dynamic @ "13.0.1" (was "12.1.1")...
    Updating package.json with dependency @angular/router @ "13.0.1" (was "12.1.1")...
  UPDATE package.json (1566 bytes)
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: scrum-poker-app@0.0.0
npm ERR! Found: @angular-devkit/build-angular@12.1.1
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"~13.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"~13.0.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler-cli@13.0.1
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/build-angular@13.0.2
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~13.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

✖ Package install failed, see above.

I also tried with the --force flag, it works but then when I do an npm install, I get this:

npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: scrum-poker-app@0.0.0
npm ERR! Found: @angular-devkit/build-angular@12.1.1
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"~13.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"~13.0.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler-cli@13.0.1
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/build-angular@13.0.2
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~13.0.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Any idea what I'm missing?

EDIT My current package.json

{
  "name": "scrum-poker-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.1.0",
    "@angular/cdk": "^12.1.1",
    "@angular/common": "~12.1.0",
    "@angular/compiler": "~12.1.0",
    "@angular/core": "~12.1.0",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "~12.1.0",
    "@angular/platform-browser": "~12.1.0",
    "@angular/platform-browser-dynamic": "~12.1.0",
    "@angular/router": "~12.1.0",
    "@datorama/akita": "^6.2.0",
    "@datorama/akita-ng-router-store": "^6.0.0",
    "@firebase/firestore-types": "^2.3.0",
    "akita-ng-fire": "^6.0.0",
    "date-fns": "^2.22.1",
    "firebase": "^8.7.0",
    "firebaseui": "^4.8.0",
    "firebaseui-angular": "^5.1.3",
    "ngx-date-fns": "^8.1.0",
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primeng": "^12.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.0",
    "@angular/cli": "~12.1.0",
    "@angular/compiler-cli": "~12.1.0",
    "@datorama/akita-ngdevtools": "^6.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.3.2"
  }
}

could you provide your `npm` version also? I see there were problems with npm 7 https://github.com/angular/angular-cli/issues/19957. Maybe they somehow relates to your case — AlexElin, Nov 14 '21 at 11:25
@Vega As I mentionned, I tried the force option, didn't help — J4N, Nov 14 '21 at 16:13
Have you checked these? https://stackoverflow.com/q/69325053/5468463, https://stackoverflow.com/q/64936044/5468463 — Vega, Nov 14 '21 at 16:18
When I get a similar error, I add the flag `--legacy-peer-deps` this seems to resolve it for me. Another thing to do, is to make sure your `npm` version is up to date. — Get Off My Lawn, Nov 14 '21 at 17:54
If you're still struggling with this error, let's look at it together in a zoom call or so. — Tariq Saeed, Feb 26 '22 at 18:57

score 5 · Answer 1 · answered Mar 10 '22 at 23:06

it looks like an issue with npm

i have "npm --version" --> 8.5.4 but it is mentioned that version 7.x produces same error

this problem is covered here: https://github.com/angular/angular-cli/issues/21204

suggested workarounds are:

passing the --force option to ng update which will propagate the force flag to npm.
Downgrade to npm 6
Switch to yarn as a package manager

i used the first one:

npm i
npx @angular/cli@13 update @angular/core@13 @angular/cli@13 --force

score 1 · Answer 2 · answered Feb 09 '23 at 17:24

1

Please use node version 16 as in angular 12 node 16 is not working

i used ng update

@angular/core@13 @angular/cli@13 --force

now its converted to 13

answered Feb 09 '23 at 17:24

neel upadhyay

344
2
10

Kurt Van den Branden · Answer 3 · 2022-01-31T20:11:53.610

0

Same problem here. I was able to upgrade from angular 12 to angular 13.2 only after I did an npm install.

npm i
npx @angular/cli@13 update @angular/core@13 @angular/cli@13

edited Jan 31 '22 at 20:11

answered Jan 31 '22 at 20:04

Kurt Van den Branden

11,995
10
76
85

Unable to upgrade from angular 12 to angular 13

3 Answers3