Angular PWA依赖冲突求助：安装@angular/pwa失败

正在创建带有Web推送通知的Ionic PWA，执行ng add @angular/pwa时安装失败，报错信息如下：

⠹ Installing packages (npm)...npm ERR! code ERESOLVE

npm ERR! Found: @angular/core@15.2.2
npm ERR! node_modules/@angular/core
npm ERR!   @angular/core@"^15.2.2" from the root project
npm ERR!   peer @angular/core@"15.2.2" from @angular/common@15.2.2
npm ERR!   node_modules/@angular/common
npm ERR!     @angular/common@"^15.2.2" from the root project
npm ERR!     peer @angular/common@"15.2.2" from @angular/forms@15.2.2
npm ERR!     node_modules/@angular/forms
npm ERR!       @angular/forms@"^15.2.2" from the root project
npm ERR!       1 more (@ionic/angular)
npm ERR!     3 more (@angular/platform-browser, ...)
npm ERR!   7 more (@angular/compiler, @angular/forms, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! @angular/service-worker@"^15.2.2" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @angular/core@15.2.7
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"15.2.7" from @angular/service-worker@15.2.7
npm ERR!   node_modules/@angular/service-worker
npm ERR!     @angular/service-worker@"^15.2.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

当前环境信息：

• Node v16.13.2
• Angular CLI 15.2.2
• Angular 15.2.2
• npm 8.1.2

额外问题：

• 尝试ng add @angular/pwa --legacy-peer-deps时出现Schema验证错误
• 执行npm cache clean --force提示缓存文件夹包含root权限文件

1. 统一Angular版本解决依赖冲突 #

@angular/service-worker@15.2.7要求匹配版本的@angular/core@15.2.7，将项目所有Angular依赖统一升级到该版本是最稳妥的方案：

• 执行升级命令：

ng update @angular/core@15.2.7 @angular/cli@15.2.7

若升级过程仍有依赖问题，追加--legacy-peer-deps参数：

ng update @angular/core@15.2.7 @angular/cli@15.2.7 --legacy-peer-deps

升级完成后，重新执行ng add @angular/pwa即可正常安装。

2. 绕过CLI参数限制处理Schema验证错误 #

Angular CLI不支持直接传递npm的--legacy-peer-deps参数，可拆分步骤手动完成PWA配置：

• 先手动安装@angular/service-worker：

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

• 再执行PWA初始化命令添加配置文件：

ng generate @angular/pwa:install

该命令会自动生成ngsw-config.json、修改angular.json和index.html等PWA所需配置。

3. 解决npm缓存权限问题 #

当缓存目录存在root权限文件时，需手动清理：

• 先获取npm缓存目录路径：

npm config get cache

• 使用root权限删除缓存目录（假设路径为~/.npm）：

sudo rm -rf ~/.npm

• 最后重新执行缓存清理：

npm cache clean --force

内容的提问来源于stack exchange，提问作者D.Hodges