Angular update from 8 to 13 peer dependency problem

Question

I'm updating my Angular application 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, the 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: [email protected]
npm ERR! Found: @angular-devkit/[email protected]
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/[email protected]
npm ERR! node_modules/@angular/compiler-cli
npm ERR! peer @angular/compiler-cli@"^11.0.0 || ^11.2.0-next" from @angular-devkit/[email protected]
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?

Answer 1

I found it! That was a problem with my Node.js version. I was using v16.9 and installing Node.js v14.19 solved my problem.

I took the opportunity to install windows-nvm to be able to manage many Node.js versions.

1. uninstall Node.js
2. install windows-nvm https://github.com/coreybutler/nvm-windows
3. use Node.js v14.19
4. upgrade to Angular 11!

Answer 2

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.