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

Question

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?

Loftus

Add --force after your update command? – Condensed

@R.Richards --force didn't help. – Loftus

Answer 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

Oftentimes

Worked for me but I had to add --allow-dirty to the second ng update – Dictatorial

This doesn't work for me. The packages are all updated, but the actual angular updates that take place within the typescript file are not attempted as it detects the angular version of the installed packages is already at 11. So I get messages saying Package '@angular/core' is already up to date. – Impermissible

Answer 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.

Addlepated

Answer 3

What worked for me are below steps -

1. Run migration command - ng update @angular/core@11 @angular/cli@11. This is what gives error.
2. Run ng update command.
3. Check the list of items to be updated with version if specified

---

  @angular-eslint/schematics              4.2.0 -> 12.0.0          ng update @angular-eslint/schematics
  @angular/cdk                            11.2.11 -> 12.0.0        ng update @angular/cdk
  @angular/cli                            11.2.11 -> 12.0.0        ng update @angular/cli
  @angular/core                           11.2.12 -> 12.0.0        ng update @angular/core
  @ngrx/store                             11.1.1 -> 12.0.0         ng update @ngrx/store

4. Type ng update and include all the mentioned plugins(with versions if mentioned) -

---

ng update @angular-eslint/schematics @angular/cdk @angular/cli @angular/core @ngrx/store --force

5. Mention --force for the command.

And my project was migrated successfully.

Plague