I am try to upgrade an Angular project from Angular v11 using ng update and got peer dependency error. I referred How do I read npm "conflicting peer dependency" error messages? to understand about the peer dependency errors, but it still does not help in this case.
. Here's the output of ng update:
We analyzed your package.json, there are some packages to update:
Name Version Command to update
--------------------------------------------------------------------------------
@angular/cli 11.2.18 -> 12.2.9 ng update @angular/cli@12
@angular/core 11.2.14 -> 12.2.9 ng update @angular/core@12
There might be additional packages which don't provide 'ng update' capabilities that are outdated.
You can update the additional packages by running the update command of your package manager.
Upon running ng update @angular/cli@12 I get the below error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @angular-devkit/build-angular@0.1100.7
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^12.2.16" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"^12.2.16" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler-cli@12.2.16
npm ERR! node_modules/@angular/compiler-cli
npm ERR! peer @angular/compiler-cli@"^12.0.0" from @angular-devkit/build-angular@12.2.16
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^12.2.16" 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!
Here's my package.json
Before running ng update
{
"name": "my-first-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^11.0.5",
"@angular/common": "^11.0.5",
"@angular/compiler": "^11.0.5",
"@angular/core": "^11.0.5",
"@angular/forms": "^11.0.5",
"@angular/platform-browser": "^11.0.5",
"@angular/platform-browser-dynamic": "^11.0.5",
"@angular/router": "^11.0.5",
"bootstrap": "3.3.7",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.0.0",
"tslib": "^2.0.3",
"zone.js": "^0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1100.4",
"@angular/cli": "^11.0.4",
"@angular/compiler-cli": "^11.0.5",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.19.9",
"codelyzer": "^6.0.1",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.4",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}
After running ng update
{
"name": "my-first-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^12.2.16",
"@angular/common": "^12.2.16",
"@angular/compiler": "^12.2.16",
"@angular/core": "^12.2.16",
"@angular/forms": "^12.2.16",
"@angular/platform-browser": "^12.2.16",
"@angular/platform-browser-dynamic": "^12.2.16",
"@angular/router": "^12.2.16",
"bootstrap": "3.3.7",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.0.0",
"tslib": "^2.0.3",
"zone.js": "^0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^12.2.16",
"@angular/cli": "^12.2.16",
"@angular/compiler-cli": "^12.2.16",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.19.9",
"codelyzer": "^6.0.1",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.16",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.4",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.3.5"
}
}
I checked the code https://github.com/angular/angular-cli/blob/12.2.x/packages/angular_devkit/build_angular/package.json
"peerDependencies": {
"@angular/compiler-cli": "^12.0.0",
As far as I know, ^12.0.0 should not cause a problem with 12.2.16 as it is in the same major version, so why am I still getting peer dependency error?
This is happening because of a Semver bug in npm. You should be able to fix it by adding --force to your upgrade command or use yarn instead.
ref. GitHub Issue
(I too had the exact issue, this worked fine for me)