Angular项目配置Service Worker遇错，求解决方案及非CLI配置方法

初始错误场景 #

执行CLI命令 ng add @angular/pwa --project chatng，在返回Packages successfully installed后出现红色错误提示：
"NOT SUPPORTED: keyword "id", use "$id" for schema ID"
检查项目后发现未生成预期的ngsw-config.json文件及assets/icons目录。

项目依赖信息 #

package.json中的依赖如下：

"dependencies": {
    "@angular/animations": "^14.1.0",
    "@angular/common": "^14.1.0",
    "@angular/compiler": "^14.1.0",
    "@angular/core": "^14.1.0",
    "@angular/forms": "^14.1.0",
    "@angular/platform-browser": "^14.1.0",
    "@angular/platform-browser-dynamic": "^14.1.0",
    "@angular/pwa": "^0.5.3",
    "@angular/router": "^14.1.0",
    "bootstrap": "^5.2.1",
    "ngx-socket-io": "^4.3.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.1.0",
    "@angular/cli": "~14.1.0",
    "@angular/compiler-cli": "^14.1.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }

Angular版本信息 #

ng version返回结果：

/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 16.1.6
Node: 16.17.0
Package Manager: npm 8.15.0
OS: win32 x64

Angular: 14.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.3
@angular-devkit/build-angular   14.2.3
@angular-devkit/core            14.2.3
@angular-devkit/schematics      16.1.6
@angular/cli                    16.1.6
@angular/pwa                    0.5.3
@schematics/angular             16.1.6
rxjs                            7.5.6
typescript                      4.7.4
zone.js                         0.11.8

已升级CLI到新版本，但问题未解决。

2023年8月2日更新：后续尝试的错误 #

执行命令后出现如下输出：

i Using package manager: npmtng>add @angular/pwa --project chatng
√ Found compatible package version: @angular/pwa@16.1.6.
√ Package information loaded.

The package @angular/pwa@16.1.6 will be installed and executed.
Would you like to proceed? Yes
√ Packages successfully installed.
CREATE ngsw-config.json (631 bytes)
CREATE src/manifest.webmanifest (1336 bytes)
CREATE src/assets/icons/icon-128x128.png (1124 bytes)
CREATE src/assets/icons/icon-144x144.png (1291 bytes)
CREATE src/assets/icons/icon-152x152.png (1306 bytes)
CREATE src/assets/icons/icon-192x192.png (1654 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (711 bytes)
CREATE src/assets/icons/icon-96x96.png (857 bytes)
UPDATE angular.json (3508 bytes)
UPDATE package.json (1142 bytes)
UPDATE src/app/app.module.ts (1910 bytes)
UPDATE src/index.html (973 bytes)
- Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: chatng@0.0.0
npm ERR! Found: @angular/core@14.2.2
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^14.1.0" from the root project
npm ERR!   peer @angular/core@"14.2.2" from @angular/animations@14.2.2
npm ERR!   node_modules/@angular/animations
npm ERR!     @angular/animations@"^14.1.0" from the root project
npm ERR!     peerOptional @angular/animations@"14.2.2" from @angular/platform-browser@14.2.2
npm ERR!     node_modules/@angular/platform-browser
npm ERR!       @angular/platform-browser@"^14.1.0" from the root project
npm ERR!       3 more (@angular/forms, @angular/platform-browser-dynamic, @angular/router)
npm ERR!   7 more (@angular/common, @angular/compiler, @angular/forms, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @angular/service-worker@"^14.1.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@14.3.0
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"14.3.0" from @angular/service-worker@14.3.0
npm ERR!   node_modules/@angular/service-worker
npm ERR!     @angular/service-worker@"^14.1.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! See C:\Users\rober\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\rober\AppData\Local\npm-cache\_logs\2023-08-02T18_34_38_713Z-debug-0.log
× Package install failed, see above.
The Schematic workflow failed. See above.

执行npm i -f后，输出如下：

npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @angular/service-worker@14.3.0
npm WARN Found: @angular/common@14.2.2
npm WARN node_modules/@angular/common
npm WARN   @angular/common@"^14.1.0" from the root project
npm WARN   5 more (@angular/forms, @angular/platform-browser, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/common@"14.3.0" from @angular/service-worker@14.3.0
npm WARN node_modules/@angular/service-worker
npm WARN   @angular/service-worker@"^14.1.0" from the root project
npm WARN   1 more (@angular-devkit/build-angular)
npm WARN
npm WARN Conflicting peer dependency: @angular/common@14.3.0
npm WARN node_modules/@angular/common
npm WARN   peer @angular/common@"14.3.0" from @angular/service-worker@14.3.0
npm WARN   node_modules/@angular/service-worker
npm WARN     @angular/service-worker@"^14.1.0" from the root project
npm WARN     1 more (@angular-devkit/build-angular)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @angular/service-worker@14.3.0
npm WARN Found: @angular/core@14.2.2
npm WARN node_modules/@angular/core
npm WARN   @angular/core@"^14.1.0" from the root project
npm WARN   8 more (@angular/animations, @angular/common, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer @angular/core@"14.3.0" from @angular/service-worker@14.3.0
npm WARN node_modules/@angular/service-worker
npm WARN   @angular/service-worker@"^14.1.0" from the root project
npm WARN   1 more (@angular-devkit/build-angular)
npm WARN
npm WARN Conflicting peer dependency: @angular/core@14.3.0
npm WARN node_modules/@angular/core
npm WARN   peer @angular/core@"14.3.0" from @angular/service-worker@14.3.0
npm WARN   node_modules/@angular/service-worker
npm WARN     @angular/service-worker@"^14.1.0" from the root project
npm WARN     1 more (@angular-devkit/build-angular)

added 1 package, and audited 994 packages in 4s

138 packages are looking for funding
  run `npm fund` for details

6 vulnerabilities (3 moderate, 3 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

问题 #

• 问题出在哪里？
• 有没有无需使用CLI配置Service Worker的方法？

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