CODEWITHSUNDEEP
angularnpm
hullunist
hullunist

Reputation: 1277

After Angular update npm install fails because of peer dependency conflicts

I'm having trouble updating my Angular version. When I use ng update I get the following output:

Name                                       Version                  Command to update
     ----------------------------------------------------------------------------------------
      @angular/cdk                               12.1.2 -> 12.2.0         ng update @angular/cdk
      @angular/cli                               12.1.2 -> 12.2.0         ng update @angular/cli
      @angular/core                              12.1.2 -> 12.2.0         ng update @angular/core
      @angular/material                          12.1.2 -> 12.2.0         ng update @angular/material

Afterwards I try to update all four of them using the command:

ng update @angular/cdk @angular/cli @angular/core @angular/material -C

The package.json is updated and afterwards npm i is run in order to install all packages. Here I encounter the following 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.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"^12.2.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/localize
npm ERR!   peerOptional @angular/localize@"^12.0.0 || ^12.2.0-next" from @angular-devkit/[email protected]
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"^12.2.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.

I do not know why it says Found: @angular-devkit/[email protected] when in the package.json all @angular related files have ~12.2.0 declared as version.

Upvotes: 30

Views: 101893

Answers (6)

tagaism
tagaism

Reputation: 642

For those who use yarn the solution is almost the same:

rm -r node-modules
rm yarn.lock
yarn install

Upvotes: 0

chris burd
chris burd

Reputation: 818

You should never upgrade Angular all the way across the board like that. Instead it's in hierarchical order - because many of those dependencies are just dependent upon one another. So several of them disappear.

It's very easy to fix this problem by just deleting node_modules and running npm install again.

This time though in order:

   npm install @angular/cli@latest -g
   ng update @angular/cli,
   ng update @angular/common
   npm install @angular/cdk@latest
   npm install @angular/material@latest

in angular 12.2 there are warnings about chokidar if you run npm audit fix it won't do anything, and there are several others - you just have to wait till they fix them because they're dev dependencies.

this is taken from a live project current working version with universal:{

 "@angular/animations": "~12.1.0",
    "@angular/cdk": "^12.2.0",
    "@angular/common": "~12.1.0",
    "@angular/compiler": "~12.1.0",
    "@angular/core": "~12.1.0",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "~12.1.0",
    "@angular/platform-browser": "~12.1.0",
    "@angular/platform-browser-dynamic": "~12.1.0",
    "@angular/platform-server": "~12.1.0",
    "@angular/router": "~12.1.0",
    "@angular/service-worker": "~12.1.0",
    "@easypost/api": "^3.11.2",
    "@nguniversal/express-engine": "^12.1.0",
    "bootstrap": "^5.0.2",
    "dayjs": "^1.10.6",
    "express": "^4.15.2",
    "firebase": "^8.8.1",
    "ngx-quill": "^14.1.2",
    "quill": "^1.3.7",
    "quill-image-resize-module": "^3.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
}

Upvotes: 20

Rajesh Kumar Bhawsar
Rajesh Kumar Bhawsar

Reputation: 477

I use npm install --force and it worked for me

Upvotes: 0

mtiwari87
mtiwari87

Reputation: 127

When getting peer dependency error run below command
npm install --legacy-peer-deps
It will override all the dependencies in package.lock.json & package.json file of your project.

Upvotes: 9

kian
kian

Reputation: 1687

Remove node_modules and install it again. Also make surepackage.json has no duplicated dependencies.

Upvotes: 6

Salahuddin Ahmed
Salahuddin Ahmed

Reputation: 5650

Try with deleting node_modules folder and package-lock.json file and then reinstall npm which might resolve your issue.

So, run the following commands:

remove node_modules 
remove package-lock.json
npm install

Upvotes: 47

Related Questions