'Unable to update Angular from 10 to 11 due to dependency errors

I am following this site and trying to update my project to 11.0 through the following command.

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

Every time I run it, it gives me the following error:

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.17" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"~0.1102.17" from the root project
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.17" from the root project
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!

On other similar questions, I have found this command being referred to a lot

npm install --legacy-peer-deps

I am not sure how the above command can help since I have already run npm install and just trying to upgrade now with npx @angular/cli@11 update @angular/core@11 @angular/cli@11

Environment details:

Global Angular CLI: 13.1.2
Local Angular CLI: 10.2.4
Angular version: 10.2.5
Node: 16.13.1

What different can I do to make it work?



Solution 1:[1]

I could solve it this way:

After running the below upgrade command

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

It fails with same error but it changes package.json file for angular packages. So run below command without changing package.json:

npm i --legacy-peer-deps

--legacy-peer-deps is important here. Then run the upgrade command again and it should work:

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

Solution 2:[2]

I had same problem so changed some dependency versions in package.json

"dependencies": {
  "@angular/animations": "^11.2.14",
  "@angular/cdk": "11.0.4",
  "@angular/common": "^11.2.14",
  "@angular/compiler": "^11.2.14",
  "@angular/core": "^11.2.14",
  "@angular/forms": "^11.2.14",
  "@angular/platform-browser": "^11.2.14",
  "@angular/platform-browser-dynamic": "^11.2.14",
  "@angular/router": "^11.2.14",
}

"devDependencies": {
  "@angular-devkit/build-angular": "^0.1102.6",
  "@angular/cli": "^11.2.17",
  "@angular/compiler-cli": "^11.2.14",
  "@angular/language-service": "11.2.14"
}

remove node_modules and run npm i again.

Solution 3:[3]

1- go to Nodejs website and update your version to the latest LTS version.

2- go to your OS command line and run npm i -g npm to update your npm to the latest version.

3- Update your global Angular Version to v11.0 by npm uninstall and npm install again,

4- if none of this works try to update on a different computer.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 kian
Solution 3 Babak Kh