将Angular 8.2升级至13.0时遭遇对等依赖冲突问题求助

Hey there! I’ve helped lots of folks work through this exact issue when jumping multiple Angular versions—let’s break down how to get past those peer dependency conflicts and migration failures.

First, Understand the Root Cause #

When upgrading from Angular 8 to 13 (a huge cross-version jump), most of your dependencies (including @angular/cdk and third-party libraries) aren’t compatible with the target Angular version right out the gate. The ng update tool’s strict peer dependency check blocks the migration because it can’t safely update everything in one go, even with --force.

Step-by-Step Fixes #

1. Clean Up Your Dependency Tree First #

Start with a fresh slate to eliminate any cached or corrupted dependencies:

• Delete your node_modules folder and lock file:

  rm -rf node_modules package-lock.json
  

• Reinstall your current dependencies to ensure consistency:

  npm install
  

2. Upgrade Gradually (Don’t Jump Straight to 13!) #

Angular’s official docs recommend incremental upgrades (8 → 9 → 10 → 11 → 12 → 13) because each version has specific migration scripts and dependency requirements. Here’s how to tackle the first jump to Angular 9:

• Upgrade the core Angular packages first:

  ng update @angular/core@9 @angular/cli@9 --force
  

  Use --force here to override initial peer dependency blocks, but verify the install completes without critical errors.
• Next, upgrade @angular/cdk to match Angular 9:

  ng update @angular/cdk@9 --force
  

• After each version upgrade, run ng serve to check if your app compiles and runs. Fix any immediate errors (like deprecated API usage) before moving to the next version.

3. Resolve Third-Party Library Conflicts #

Most peer dependency issues come from third-party libraries (e.g., UI components, form tools) that aren’t compatible with your target Angular version.

• Open your package.json and look for libraries like ngx-bootstrap, @angular/material, or custom plugins.
• Check each library’s documentation to find the version that matches your current Angular version (e.g., Angular 9 → ngx-bootstrap v5.x, Angular 13 → ngx-bootstrap v11.x).
• Manually update the version numbers in package.json, then run:

  npm install
  

4. Fix Migration Script Blockages #

If you still see the Migration failed: Incompatible peer dependencies found error, it means the migration script requires specific dependency versions. Try this:

• Temporarily modify the conflicting dependency version in package.json to a version compatible with your target Angular release.
• Run npm install to apply the change.
• Re-run the ng update command for the package (e.g., ng update @angular/cdk@9).
• Once the migration completes, you can adjust the dependency to the latest compatible version for that Angular release.

5. Address Deprecated APIs #

Each Angular version phased out old APIs—after upgrading, you’ll likely see compile warnings about deprecated code. For example:

• Angular 9 changed how ViewChild and ContentChild work (you need to specify static: true/false).
• Angular 10 removed some legacy pipes and directives.
  Fix these warnings as you go—they’ll prevent issues in later upgrades and ensure your app is stable.

Final Tips #

• Take it slow: Don’t rush through versions. Validate each upgrade before moving on.
• Check the Angular update guide for each version to get version-specific migration notes.
• If a library is no longer maintained or doesn’t support newer Angular versions, consider replacing it with an alternative.

内容的提问来源于stack exchange，提问作者joel ståde