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?

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