1

I'm upgrading my Angular version from 11 -> 16. This Angular documentation has been helpful but I'm still running into errors and issues.

Here are my versions:

Angular CLI: 11.2.19
Node: 18.16.0
OS: darwin x64

Angular: 11.2.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.19
@angular-devkit/build-angular   0.1102.19
@angular-devkit/core            11.2.19
@angular-devkit/schematics      11.2.19
@angular/cli                    11.2.19
@schematics/angular             11.2.19
@schematics/update              0.1102.19
rxjs                            6.6.7
typescript                      4.1.6

I started with following advice from the Angular documentation:

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

I'm struggling to fix this error:

npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: personal-website@0.0.0
npm ERR! Found: @angular-devkit/build-angular@0.1102.19
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"~16.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"~16.2.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/compiler-cli@16.2.1
npm ERR! node_modules/@angular/compiler-cli
npm ERR!   peer @angular/compiler-cli@"^16.0.0" from @angular-devkit/build-angular@16.2.0
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~16.2.0" from the root project
npm ERR! 
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! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/micahdittmar/.npm/_logs/2023-08-22T15_51_16_287Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/micahdittmar/.npm/_logs/2023-08-22T15_51_16_287Z-debug-0.log
(base) micahs-air:micah-dittmar micahdittmar$ npm cache clean --force

npm WARN using --force Recommended protections disabled.

Edit: I have found this post to be really useful, but wasn't able to find it right off the bat as it is not as recent or close to Angular 16. So I am adding this to help guide to that resource.

Micah
  • 479
  • 1
  • 7
  • 17

2 Answers2

1
  1. Try run npm i --save --legacy--peer-deps,
  2. Delete package-lock.json and node_modules
  3. Reinstall with npm i
1

To fix this angular v16 issue I had to:

  1. Run one of these: (option 1):npm install --save --legacy-peer-deps (option 2) - permanent config option: npm config set legacy-peer-deps true
  2. Remove node_modules folder and package-lock.json file
  3. Run: npx npm-check-updates -u
  4. Run: npm install

The one extra step that helps in this process is step 3: npx npm-check-updates -u. This helps update your package.json to add all the latest versions so you're up to date and your npm i runs without issues.

Micah
  • 479
  • 1
  • 7
  • 17