CODEWITHSUNDEEP
npmangular-cli
Phalgun
Phalgun

Reputation: 1494

@angular-devkit/build-angular dependency issue while upgrading from Angular 11.0.5 to 12.2.16

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

Upvotes: 7

Views: 22237

Answers (2)

SYL_DEV
SYL_DEV

Reputation: 31

you should better update properly the packages corresponding to your version by checking compatibility here : https://www.npmjs.com/ and here: https://www.npmpeer.dev/packages/@angular-devkit/build-angular/compatibility

You should also try to use this command in your terminal : npm list package 'packageName' to get the dependency tree.

All this requires patience and not brute force. You should properly resolved theses conflict and not use --force or you'll run into an infinite loop of issues. I've been there trust me.

Good Luck for the next ones !

Upvotes: 3

Andrew Knackstedt
Andrew Knackstedt

Reputation: 596

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)

Upvotes: 19

Related Questions