CODEWITHSUNDEEP
angularangular-upgrade
J4N
J4N

Reputation: 20697

Unable to upgrade from angular 12 to angular 13

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: [email protected]
npm ERR! Found: @angular-devkit/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/[email protected]
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: [email protected]
npm ERR! Found: @angular-devkit/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^13.0.0" from @angular-devkit/[email protected]
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"
  }
}

Upvotes: 6

Views: 9197

Answers (3)

neel upadhyay
neel upadhyay

Reputation: 348

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

Upvotes: 1

davey
davey

Reputation: 1785

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

Upvotes: 5

Kurt Van den Branden
Kurt Van den Branden

Reputation: 12934

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

Upvotes: 0

Related Questions