10

I'm updating my angular app by following the angular update guide and I'm stuck with an error of peer dependencies.

First I update from angular 8 to 9 but there was still a peer dependency error. So I use this command with --force argument :

cmd /C "set "NG_DISABLE_VERSION_CHECK=1" && npx @angular/cli@9 update @angular/cli@9 @angular/core@9" --force

And it works !

Then from Angular 9 to 10, same method with

npx @angular/cli@10 update @angular/core@10 @angular/cli@10 --force

And it works, too. Now I want to continue to Angular 11, 12 and 13 but when I use this command :

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

I'm getting this error :

The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 11.2.18 to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 61 dependencies.
Fetching dependency metadata from registry...
Package "@swimlane/ngx-charts" has an incompatible peer dependency to "@angular/animations" (requires "7.x || 8.x" (extended), would install "11.2.14").
Package "@ng-bootstrap/ng-bootstrap" has an incompatible peer dependency to "@angular/forms" (requires "^8.0.0" (extended), would install "11.2.14").
Package "@swimlane/ngx-charts" has an incompatible peer dependency to "@angular/platform-browser" (requires "7.x || 8.x" (extended), would install "11.2.14").
Package "@swimlane/ngx-charts" has an incompatible peer dependency to "@angular/platform-browser-dynamic" (requires "7.x || 8.x" (extended), would install "11.2.14").
Updating package.json with dependency @angular-devkit/build-angular @ "0.1102.18" (was "0.1002.4")...
Updating package.json with dependency @angular/cli @ "11.2.18" (was "10.2.4")...
Updating package.json with dependency @angular/compiler-cli @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/language-service @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency karma @ "6.3.11" (was "5.0.9")...
Updating package.json with dependency @angular/animations @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/common @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/compiler @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/core @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/forms @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/platform-browser @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/router @ "11.2.14" (was "10.2.5")...
UPDATE package.json (2808 bytes)
⠧ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: stacked@0.0.0
npm ERR! Found: @angular-devkit/build-angular@0.1002.4
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"~0.1102.18" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"~0.1102.18" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler-cli@11.2.14
npm ERR! node_modules/@angular/compiler-cli
npm ERR! peer @angular/compiler-cli@"^11.0.0 || ^11.2.0-next" from @angular-devkit/build-angular@0.1102.18
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"~0.1102.18" 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!
npm ERR! See C:\Users\leino\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\leino\AppData\Local\npm-cache_logs\2022-01-14T16_41_50_262Z-debug.log

✖ Package install failed, see above.
× Migration failed. See above for further details.

I know that was a bad idea to use --force argument, but prefer to solve peer dependencies once angular is updated, not on each version.

Please, does anyone got an idea ?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Leinox
  • 279
  • 1
  • 3
  • 10
  • 9
    Thank you @marc_s. In french it's called "dépendance" with a "a". – Leinox Jan 14 '22 at 17:53
  • 1
    you might be facing an issue with npm as in v8+ it will try to upgrade package-lock.json's version. my suggestion is for you to install npm v7 do the angular upgrade then install the latest npm again – The Fabio Jan 15 '22 at 00:53
  • this might give you some more ideas https://stackoverflow.com/a/68159069/4604645 – The Fabio Jan 15 '22 at 00:58
  • It's a dependency, not a depdendency @marc_s – bob82 Sep 13 '22 at 13:44

7 Answers7

16

Found it ! That was a problem with my node version. I was using v16.9 and install node v14.19 solve my problem.

I took the oportunity to install windows-nvm to be abble to manage many node version.

  1. uninstall node
  2. install windows-nvm https://github.com/coreybutler/nvm-windows
  3. use node v14.19
  4. upgrade to angular 11 !
Leinox
  • 279
  • 1
  • 3
  • 10
  • Found this NPM command in 2023, not sure if it helps anyone, but here it is - "npm install --save --legacy-peer-deps". Another way is delete "node_modules" folder and "package_lock. json" file and then run "npm cache clean --force" after "npm i --force" commands. Full article "https://www.angularjswiki.com/angular/unable-to-resolve-dependency-tree-error-in-angular-while-installing-npm-packages/" – sys__admin Apr 04 '23 at 16:30
4

I had the exact same problem today. This is how I fixed it:

npx @angular/cli@11 update @angular/core@11 @angular/cli@11 --force
# now getting the same errors as above
npm install @angular-devkit/build-angular@~0.1102.18 --force
git checkout -- .
npx @angular/cli@11 update @angular/core@11 @angular/cli@11 --force

Now go to package.json and remove the line containing @angular-devkit/build-ng-packagr.

Execute this lines:

rm package-lock.json
rm -rf node_modules
npm install

Done!

Maybe removing that particular line from package.json plus npm install would have been enough and the other commands above where unnecessary but I rather tell you all I did :)

By the way before I tried all this I also downgraded to npm v7 as suggested in one of the comments above but I don't think this was necessary or did any help.

fatih
  • 1,285
  • 11
  • 27
b.schnabel
  • 41
  • 3
2

I just had this exact problem, and running this command did it for me:

npm install @angular-devkit/build-angular@~0.1102.18 --force
Pedro Santiago
  • 21
  • 1
1

This problem can get very frustrating - I've spent a couple hours trying to understand it - even creating dummy angular 13 / 14 projects to see what the latest defaults are.

My tip is don't forget all the packages that may refer to Angular as well as the angular packages themselves. You may have forgotten you even installed something that's breaking it.

I once used ngx-md but (as you can see below) it wasn't updated since v8. And I'd managed to get away with it until now (I just reinstalled Windows and the latest node / npm brought me this issue).

While I did start off with many more errors than this and some were fixed by cleaning up my angular imports - in the end the final batch of errors shown here vanished by just removing ngx-md from package.json. It was almost too easy!

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: ngx-md@8.1.6
npm ERR! Found: @angular/common@13.3.11
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~13.3.0" from the root project
npm ERR!   peer @angular/common@"^13.0.0 || ^14.0.0-0" from @angular/cdk@13.3.9
npm ERR!   node_modules/@angular/cdk
npm ERR!     @angular/cdk@"~13.3.0" from the root project
npm ERR!     peer @angular/cdk@"^13.0.0" from @angular/flex-layout@13.0.0-beta.38
npm ERR!     node_modules/@angular/flex-layout
npm ERR!       @angular/flex-layout@"^13.0.0-beta.38" from the root project
npm ERR!     1 more (@angular/material)
npm ERR!   15 more (@angular/flex-layout, @angular/forms, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^8.0.0" from ngx-md@8.1.6
npm ERR! node_modules/ngx-md
npm ERR!   ngx-md@"^8.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/common@8.2.14
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^8.0.0" from ngx-md@8.1.6
npm ERR!   node_modules/ngx-md
npm ERR!     ngx-md@"^8.0.0" 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.
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
0

upgrade from 8 to 13 !! this what I would do!

  1. uninstall the global @angular/cli using
    sudo npm uninstall -g @angular/cli

  2. install the latest global version of angular cli using
    sudo npm install -g @angular/cli

  3. check installed global version using
    sudo npm list -g depth0

  4. create new project using sudo ng new yourProjectName

  5. remove node_modules folder and package-lock.json file

  6. move your old project files (don't overwrite angular.json or package.json file, instead, move non angular npm packages from your old project package.json to your new project package.json file)

  7. run sudo npm install

  8. run ng serve and work your app errors

good luck

user12163165
  • 555
  • 8
  • 12
0

The major difference from going from version 10 to 11 is that Angular's module @angular-devkit/build-angular and it's associated dependencies have been moved into a single module.

You will notice that @angular-devkit/build-angular@0.1002.4 changes to @angular-devkit/build-angular@semantic-versioning-that-aligns-with-the-rest-of-the-other-angular-modules.

With that said, there will be some changes you need to make inside you angular.json and other configuration files. The easiest thing to do (after running npx update) is create some temporary hello-world project, and compare all configuration files

Version 11 to 12 seems more straight forward. Then from version 12 to 13 they need you to have NodeJs version 12.20.0 or higher. You might need to make a few code tweaks for example: if you are using things like Service Workers, as some of the methods are deprecated.

Obothlale
  • 201
  • 3
  • 4
0

I had the same issue when running ng update @angular/core@11 @angular/cli@11 --force.

My fix is to install angular 11: npm i -g @angular/cli@11 @angular/core@11

then run: ng update @angular/core@11 @angular/cli@11 --force

DJSDev
  • 812
  • 9
  • 18
user1289360
  • 41
  • 2