Migration failed: Incompatible peer dependencies found - Upgrading Angular to Version 12

Question

I am upgrading my apps from Angular v11 to Angular v12. I have this error when I try to upgrade Angular packages:

ng update @angular/core@12 @angular/cli@12

Migration failed: Incompatible peer dependencies found 

Package has an incompatible peer dependency to "@angular/common" (requires "^8.1.3 || ^9.0.0" (extended), would install "12.0.0").
Package has an incompatible peer dependency to "@angular/core" (requires "^8.1.3 || ^9.0.0" (extended), would install "12.0.0").

Those are just warnings, but migration has failed because of them.

I can choose to use the --force option to ignore incompatible peer dependencies and address these warnings later. Should I do that? If I do that will that break the packages that have incompatible peer dependencies?

Layout

Yes it is possible that the external packages you're using won't function properly. Do check whether your project libraries have Angular 12 support – Gyrose

can you include more info, like what dependencies are incompatible in your case ? – Flowery

I added it. Only @ng-bootstrap/ng-bootstrap library is showing, but I don't know is that because upgrading will stop after discovering first incompatible peer dependency, or is this the only one. – Layout

Isn't there some trace other than this one line Migration failed: Incompatible peer dependencies found? – Twostep

Yeah, the list of incompatible packages, but I didn't include that in question because it is project related. – Layout

You may be missing an error like in this particular case - #60286369. So thought to ask about stack trace. Some more data in log like - (requires ">=3.4 < 3.6", would install "3.7.5").???? or anything – Twostep

Yeah, you are right. I updated my question. The problem is that peer dependency is incompatible with @angular/common and @angular/core . – Layout

Answer 1

I was facing the same problem and this are the steps I took to resolve

1. Ensure your node version is greater than 10
2. Run ng update @angular/core@12 @angular/cli@12. You are most likely to receive an error like below

Package "@angular-eslint/builder" has an incompatible peer dependency to "@angular/cli" (requires ">= 11.2.0 < 12.0.0", would install "12.0.0").
× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
  See "C:\Users\KOTIENO1\AppData\Local\Temp\ng-gY5FIE\angular-errors.log" for further details.

The warning advices that we can use --force to ignore the warnings. We will do that for now 3) Run ng update. This will return all commands we need to run

Using package manager: 'npm'
Collecting installed dependencies...
Found 68 dependencies.
    We analyzed your package.json, there are some packages to update:

      Name                                    Version                  Command to update
     -------------------------------------------------------------------------------------
      @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

    There might be additional packages which don't provide 'ng update' capabilities that are outdated.
    You can update the additional packages by running the update command of your package manager.

4. Run ng update @angular-eslint/schematics @angular/cdk @angular/cli @angular/core @ngrx/store --force. This is per the step 3, yours may be slightly different. Remember to add --force flag

This successfully runs with a a number of warnings

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: @angular/[email protected]
npm WARN node_modules/@angular/compiler-cli
npm WARN   @angular/compiler-cli@"~12.0.0" from the root project
npm WARN   3 more (@angular-devkit/build-angular, @angular/localize, ng-packagr)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/compiler-cli@"^12.0.0-next" from @angular-devkit/[email protected]
npm WARN node_modules/@angular-devkit/build-angular
npm WARN   @angular-devkit/build-angular@"~12.0.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/typescript
npm WARN   typescript@"4.2.4" from the root project
npm WARN   4 more (@angular-devkit/build-angular, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer typescript@"~4.2.3" from @angular-devkit/[email protected]
npm WARN node_modules/@angular-devkit/build-angular
npm WARN   @angular-devkit/build-angular@"~12.0.0" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: @angular/[email protected]
npm WARN node_modules/@angular/compiler
npm WARN   @angular/compiler@"~12.0.0" from the root project
npm WARN   3 more (@angular/compiler-cli, @angular/localize, ng-packagr)

5. By this step your package.json file has been updated. Run ng serve to make sure everything is working as expected

6. Check the warnings. Most will be related to compatibility as most angular related packages expect verson 10 <= @angular/core <12. This can be handled by case to case basis e.g updating these packages

Dolor

Yeah, I used the --force option. I had problem with 3rd party packages that expected lower version than 12. – Layout

Wonder why do they not mention these things in the "Official Angular Migration Guide". What is the purpose of such a Guide if you still end up here to make things work... – Absinthism