Angular update from 8 to 13 peer dependency problem-CodePudding

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: [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 ?

CodePudding user response：

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

uninstall the global @angular/cli using
sudo npm uninstall -g @angular/cli
install the latest global version of angular cli using
sudo npm install -g @angular/cli
check installed global version using
sudo npm list -g depth0
create new project using sudo ng new yourProjectName
remove node_modules folder and package-lock.json file
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)
run sudo npm install
run ng serve and work your app errors

good luck

CodePudding user response：

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

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.