Upgrade from Angular 11 to 12 causes peer dependency conflict

user_1385931 0
Viewed 7843

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!

angular-cli npm angular node.js
5 Answers

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
user_4530240

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
user_25957160

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
user_152247810

I had this same issue which was confusing as a beginner

I initially tried this command, but I just got another error

ng update @angular/cli @angular/core

I then found this link https://github.com/angular/angular-cli/issues/20843 and one person said to do this global cli command, this seemed to have fixed the issue when creating a new project

npm i @angular/cli -g

I can now create my new project command e.g.:

ng new example --routing false --style css --skip-git --skip-tests

enter image description here

user_40274380

Update your tsconfig.json and then run

sudo npm install --force
user_174281760
Related