在Ionic-Capacitor项目中执行ng add @angular/pwa报错的解决方法

在Ionic-Capacitor项目中执行ng add @angular/pwa时失败，触发npm ERESOLVE依赖冲突错误：当前项目的@angular/core版本为17.3.8，但@angular/service-worker@17.3.10需要依赖@angular/core@17.3.10。

执行日志 #

ng add @angular/pwa
ℹ Using package manager: npm
✔ Found compatible package version: @angular/pwa@17.3.8.
✔ Package information loaded.

The package @angular/pwa@17.3.8 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
CREATE ngsw-config.json (661 bytes)
CREATE src/manifest.webmanifest (1389 bytes)
CREATE src/assets/icons/icon-128x128.png (2875 bytes)
CREATE src/assets/icons/icon-144x144.png (3077 bytes)
CREATE src/assets/icons/icon-152x152.png (3293 bytes)
CREATE src/assets/icons/icon-192x192.png (4306 bytes)
CREATE src/assets/icons/icon-384x384.png (11028 bytes)
CREATE src/assets/icons/icon-512x512.png (16332 bytes)
CREATE src/assets/icons/icon-72x72.png (1995 bytes)
CREATE src/assets/icons/icon-96x96.png (2404 bytes)
UPDATE angular.json (4451 bytes)
UPDATE package.json (2222 bytes)
UPDATE src/app/app.module.ts (1357 bytes)
UPDATE src/index.html (1075 bytes)
⠹ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: ap-cloud-app@0.0.1
npm ERR! Found: @angular/core@17.3.8
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^17.0.2" from the root project
npm ERR!   peer @angular/core@"17.3.8" from @angular/animations@17.3.8
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"^17.0.2" from the root project
npm ERR!     peerOptional @angular/animations@"17.3.8" from @angular/platform-browser@17.3.8
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       @angular/platform-browser@"^17.0.2" from the root project
npm ERR!       3 more (@angular/forms, @angular/platform-browser-dynamic, @angular/router)
npm ERR!   8 more (@angular/common, @angular/compiler, @angular/forms, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/service-worker@"^17.0.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@17.3.10
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"17.3.10" from @angular/service-worker@17.3.10
npm ERR!   node_modules/@angular/service-worker
npm ERR!     @angular/service-worker@"^17.0.2" 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.

Ionic环境信息 #

Ionic:

   Ionic CLI                     : 6.20.8 (C:...\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : not installed
   @angular-devkit/build-angular : 17.3.7
   @angular-devkit/schematics    : 17.3.7
   @angular/cli                  : 17.3.7
   @ionic/angular-toolkit        : 11.0.1

Capacitor:

   Capacitor CLI      : 6.0.0
   @capacitor/android : not installed
   @capacitor/core    : 6.0.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v22.2.0 (C:\Program Files\nodejs\node.exe)
   npm    : 9.6.0
   OS     : Windows 10

package.json内容 #

{
  "name": "ap-cloud-app",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.0.2",
    "@angular/common": "^17.0.2",
    "@angular/compiler": "^17.0.2",
    "@angular/core": "^17.0.2",
    "@angular/forms": "^17.0.2",
    "@angular/platform-browser": "^17.0.2",
    "@angular/platform-browser-dynamic": "^17.0.2",
    "@angular/router": "^17.0.2",
    "@angular/service-worker": "^17.0.2",
    "@capacitor/app": "6.0.0",
    "@capacitor/browser": "^6.0.0",
    "@capacitor/core": "6.0.0",
    "@capacitor/haptics": "6.0.0",
    "@capacitor/keyboard": "6.0.0",
    "@capacitor/network": "^6.0.0",
    "@capacitor/status-bar": "6.0.0",
    "@ionic/angular": "^8.0.0",
    "@ionic/storage-angular": "^4.0.0",
    "ionicons": "^7.0.0",
    "rxjs": "~7.8.0",
    "swiper": "^11.1.3",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.0.0",
    "@angular-eslint/builder": "^17.0.0",
    "@angular-eslint/eslint-plugin": "^17.0.0",
    "@angular-eslint/eslint-plugin-template": "^17.0.0",
    "@angular-eslint/schematics": "^17.0.0",
    "@angular-eslint/template-parser": "^17.0.0",
    "@angular/cli": "^17.0.0",
    "@angular/compiler-cli": "^17.0.2",
    "@angular/language-service": "^17.0.2",
    "@capacitor/cli": "6.0.0",
    "@ionic/angular-toolkit": "^11.0.1",
    "@types/jasmine": "~5.1.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^8.57.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsdoc": "^48.2.1",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~5.1.0",
    "jasmine-spec-reporter": "~5.0.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.2.2"
  },
  "description": "An Ionic project"
}

解决方法 #

方法1：统一升级Angular核心包到17.3.10 #

执行以下命令，将所有Angular核心依赖升级到与@angular/service-worker@17.3.10匹配的版本，彻底解决依赖冲突：

npm install @angular/core@17.3.10 @angular/animations@17.3.10 @angular/common@17.3.10 @angular/compiler@17.3.10 @angular/forms@17.3.10 @angular/platform-browser@17.3.10 @angular/platform-browser-dynamic@17.3.10 @angular/router@17.3.10 @angular/service-worker@17.3.10 --save

方法2：临时绕过依赖检查（不推荐） #

如果需要快速完成操作，可以添加--legacy-peer-deps参数绕过npm的严格依赖检查：

• 若还未执行ng add命令，直接运行：

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

• 若已经执行过ng add导致冲突，直接运行：

npm install --legacy-peer-deps

注意：此方法可能引入潜在兼容性问题，仅作为临时应急方案。

方法3：锁定@angular/service-worker版本到17.3.8 #

修改package.json中@angular/service-worker的版本为17.3.8（与最初安装的@angular/pwa版本匹配），然后执行：

npm install

这样可以让service-worker版本与现有@angular/core@17.3.8保持一致，避免版本不匹配问题。

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