Upgrade from Angular 11 to 12 causes peer dependency conflict

Question

I'm currently upgrading from Angular 11.2.14 to Angular 12.0.5 and I run into the following issue:

npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"12.0.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler-cli@12.0.5
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"12.0.5" from the root project
npm ERR!   peer @angular/compiler-cli@"^12.0.0" from @angular-devkit/build-angular@12.0.5
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"12.0.5" from the root project
npm ERR!   2 more (@angular/localize, ng-packagr)
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.

Am I right assuming this is because there is a conflict between the version 12.0.5 and 12.0.0 and they are incompatible? All my dependencies have now the same version, why is there a conflict present?

package.json

    "@angular-builders/custom-webpack": "12.1.0",
    "@angular-devkit/build-angular": "12.0.5",
    "@angular/animations": "12.0.5",
    "@angular/cdk": "12.0.5",
    "@angular/cli": "12.0.5",
    "@angular/common": "12.0.5",
    "@angular/compiler": "12.0.5",
    "@angular/compiler-cli": "12.0.5",
    "@angular/core": "12.0.5",
    "@angular/flex-layout": "11.0.0-beta.33",
    "@angular/forms": "12.0.5",
    "@angular/language-service": "12.0.5",
    "@angular/material": "11.2.13",
    "@angular/platform-browser": "12.0.5",
    "@angular/platform-browser-dynamic": "12.0.5",
    "@angular/router": "12.0.5",

Thanks a lot!

Answer 1

I had to use npm v6 to make a successful update:

npm -g i npm@^6
npm i
ng update @angular/cli@^12 @angular/core@^12

Answer 2

I'm currently upgrading from Angular 11.2.14 to Angular 12.0.5 and I run into the following issue:

npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"12.0.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler-cli@12.0.5
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   dev @angular/compiler-cli@"12.0.5" from the root project
npm ERR!   peer @angular/compiler-cli@"^12.0.0" from @angular-devkit/build-angular@12.0.5
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"12.0.5" from the root project
npm ERR!   2 more (@angular/localize, ng-packagr)
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.

Am I right assuming this is because there is a conflict between the version 12.0.5 and 12.0.0 and they are incompatible? All my dependencies have now the same version, why is there a conflict present?

package.json

    "@angular-builders/custom-webpack": "12.1.0",
    "@angular-devkit/build-angular": "12.0.5",
    "@angular/animations": "12.0.5",
    "@angular/cdk": "12.0.5",
    "@angular/cli": "12.0.5",
    "@angular/common": "12.0.5",
    "@angular/compiler": "12.0.5",
    "@angular/compiler-cli": "12.0.5",
    "@angular/core": "12.0.5",
    "@angular/flex-layout": "11.0.0-beta.33",
    "@angular/forms": "12.0.5",
    "@angular/language-service": "12.0.5",
    "@angular/material": "11.2.13",
    "@angular/platform-browser": "12.0.5",
    "@angular/platform-browser-dynamic": "12.0.5",
    "@angular/router": "12.0.5",

Thanks a lot!

Answer 3

I had got same error on every version angular update when i used official update guide https://update.angular.io/ and command npx @angular/cli@12 update @angular/core@12 @angular/cli@12. After long googling and trying i found next way for angular and angular material update (example for 10 to 11 update):

npx @angular/cli@11 update @angular/core@11 @angular/cli@11

getting subj error

remove node_modules and package-lock.json

npm install

Git commit

ng update @angular/core@11 --migrate-only --from 10 --to 11

Git commit

ng update @angular/cli@11 --migrate-only --from 10 --to 11

Git commit

npx @angular/cli@11 update @angular/material@11 @angular/flex-layout@11.0.0-beta.33

Answer 4

更新您的 tsconfig.json，然后运行 ​​sudo npm install --force

Answer 5

Downgrad npm v6, I tried bunch of commands after googling get successful now

npm -g i npm@^6
npm i
ng update @angular/cli@^12 @angular/core@^12