CODEWITHSUNDEEP
angularnpmnpx
Leinox
Leinox

Reputation: 359

Angular update from 8 to 13 peer dependency problem

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 ?

Upvotes: 11

Views: 70304

Answers (7)

user1289360
user1289360

Reputation: 51

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

Upvotes: 1

Simon_Weaver
Simon_Weaver

Reputation: 146208

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: [email protected]
npm ERR! Found: @angular/[email protected]
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/[email protected]
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/[email protected]
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 [email protected]
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/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^8.0.0" from [email protected]
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.

Upvotes: 1

Obothlale
Obothlale

Reputation: 221

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/[email protected] 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.

Upvotes: 0

Leinox
Leinox

Reputation: 359

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 !

Upvotes: 21

Pedro Santiago
Pedro Santiago

Reputation: 31

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

npm install @angular-devkit/build-angular@~0.1102.18 --force

Upvotes: 3

b.schnabel
b.schnabel

Reputation: 41

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.

Upvotes: 4

user12163165
user12163165

Reputation: 627

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

Upvotes: 0

Related Questions