Angular 17独立组件项目添加PWA时遭遇对等依赖冲突

问题场景 #

使用带独立组件的Angular 17项目，执行ng add @angular/pwa命令添加PWA支持时，出现对等依赖冲突错误。

具体错误信息 #

npm ERR! Found: @angular/core@17.2.4
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^17.2.0" from the root project
npm ERR!   peer @angular/core@"17.2.4" from @angular/animations@17.2.4
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"^17.2.0" from the root project
npm ERR!     peer @angular/animations@"^17.0.0 || ^18.0.0" from @angular/material@17.2.2
npm ERR!     node_modules/@angular/material
npm ERR!       @angular/material@"^17.2.2" from the root project
npm ERR!       1 more (@angular/material-moment-adapter)
npm ERR!     3 more (@angular/platform-browser, @angular/platform-server, @swimlane/ngx-charts)
npm ERR!   12 more (@angular/cdk, @angular/common, @angular/compiler, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! @angular/service-worker@"^17.2.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/core@17.3.3
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"17.3.3" from @angular/service-worker@17.3.3
npm ERR!   node_modules/@angular/service-worker
npm ERR!     @angular/service-worker@"^17.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! 

项目Package.json配置 #

{
  "dependencies": {
    "@angular/animations": "^17.2.0",
    "@angular/cdk": "^17.2.2",
    "@angular/common": "^17.2.0",
    "@angular/compiler": "^17.2.0",
    "@angular/core": "^17.2.0",
    "@angular/forms": "^17.2.0",
    "@angular/material": "^17.2.2",
    "@angular/material-moment-adapter": "^17.2.2",
    "@angular/platform-browser": "^17.2.0",
    "@angular/platform-browser-dynamic": "^17.2.0",
    "@angular/platform-server": "^17.2.0",
    "@angular/router": "^17.2.0",
    "@angular/service-worker": "^17.2.0",
    "@angular/ssr": "^17.2.3",
    "@swimlane/ngx-charts": "^20.5.0",
    "express": "^4.18.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.2.3",
    "@angular/cli": "^17.2.3",
    "@angular/compiler-cli": "^17.2.0",
    "@types/express": "^4.17.17",
    "@types/jasmine": "~5.1.0",
    "@types/node": "^18.18.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.3.2"
  }
}

解决方法 #

1. 统一Angular核心依赖版本（推荐） #

冲突根源是@angular/service-worker自动拉取了17.3.3版本，它要求的@angular/core版本17.3.3和当前项目的17.2.4不匹配。将所有Angular核心依赖升级到17.3.x版本即可解决：

• 执行升级命令：

npm update @angular/core @angular/animations @angular/cdk @angular/common @angular/compiler @angular/forms @angular/platform-browser @angular/platform-browser-dynamic @angular/platform-server @angular/router @angular/service-worker @angular/compiler-cli @angular/cli @angular-devkit/build-angular

• 或者手动修改package.json中所有Angular相关依赖的版本号为^17.3.0，然后执行：

npm install

2. 临时绕过依赖检查（不推荐） #

如果暂时不想升级版本，可通过--legacy-peer-deps参数强制跳过对等依赖检查，但可能引发运行时兼容性问题：

ng add @angular/pwa --legacy-peer-deps

或者直接安装@angular/service-worker时添加参数：

npm install @angular/service-worker --legacy-peer-deps

3. 验证版本一致性 #

升级完成后，执行以下命令确认所有Angular依赖版本统一：

npm list @angular/core

内容的提问来源于stack exchange，提问作者Ashish Oraon