Problem :

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/[email protected] @angular/[email protected] 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?

Tags : javascript,angular,typescript,angular12

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/[email protected] @angular/[email protected]. 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:UsersKOTIENO1AppDataLocalTempng-gY5FIEangular-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.

1. 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)

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

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