Ionic 6项目安装AngularFire失败，求解决依赖冲突方案

在Ionic 6项目中执行命令 ng add @angular/fire@latest --skip-confirmation 安装AngularFire时，报错 Packages installation failed, see above.，核心错误为npm的ERESOLVE依赖冲突。

环境配置 #

>> ionic info

Ionic:

   Ionic CLI                     : 7.0.1 (C:\Users\xxx\AppData\Roaming\nvm\v18.12.1\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.6.3
   @angular-devkit/build-angular : 15.2.4
   @angular-devkit/schematics    : 15.2.4
   @angular/cli                  : 15.2.4
   @ionic/angular-toolkit        : 8.0.0

Capacitor:

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

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.2

System:

   NodeJS : v18.12.1 (C:\Program Files\nodejs\node.exe)
   npm    : 8.19.2
   OS     : Windows 10

>> npm outdated
 
Package                             Current    Wanted    Latest  Location                                        
@angular-devkit/build-angular        15.2.4    15.2.5    15.2.5  node_modules/@angular-devkit/build-angular      
@angular/cli                         15.2.4    15.2.5    15.2.5  node_modules/@angular/cli                        
@angular/common                      15.2.4    15.2.6    15.2.6  node_modules/@angular/common                     
@angular/compiler                    15.2.4    15.2.6    15.2.6  node_modules/@angular/compiler                   
@angular/compiler-cli                15.2.4    15.2.6    15.2.6  node_modules/@angular/compiler-cli               
@angular/core                        15.2.4    15.2.6    15.2.6  node_modules/@angular/core                       
@angular/forms                       15.2.4    15.2.6    15.2.6  node_modules/@angular/forms                      
@angular/language-service            15.2.4    15.2.6    15.2.6  node_modules/@angular/language-service          
@angular/platform-browser            15.2.4    15.2.6    15.2.6  node_modules/@angular/platform-browser          
@angular/platform-browser-dynamic    15.2.4    15.2.6    15.2.6  node_modules/@angular/platform-browser-dynamic  
@angular/router                      15.2.4    15.2.6    15.2.6  node_modules/@angular/router                     
@capacitor/cli                        4.7.1     4.7.1     4.7.3  node_modules/@capacitor/cli                      
@capacitor/core                       4.7.1     4.7.1     4.7.3  node_modules/@capacitor/core                     
@ionic/angular                        6.6.3     6.7.2     7.0.1  node_modules/@ionic/angular                      
@ionic/angular-toolkit                8.0.0     8.1.0     9.0.0  node_modules/@ionic/angular-toolkit              
@types/jasmine                        4.0.3     4.0.3     4.3.1  node_modules/@types/jasmine                      
@types/node                        12.20.55  12.20.55  18.15.11  node_modules/@types/node                         
@typescript-eslint/eslint-plugin      5.3.0     5.3.0    5.58.0  node_modules/@typescript-eslint/eslint-plugin   
@typescript-eslint/parser             5.3.0     5.3.0    5.58.0  node_modules/@typescript-eslint/parser          
eslint                               7.32.0    7.32.0    8.38.0  node_modules/eslint                              
eslint-plugin-import                 2.22.1    2.22.1    2.27.5  node_modules/eslint-plugin-import               
eslint-plugin-jsdoc                  30.7.6    30.7.6    40.3.0  node_modules/eslint-plugin-jsdoc                
eslint-plugin-prefer-arrow            1.2.2     1.2.2     1.2.3  node_modules/eslint-plugin-prefer-arrow         
ionicons                              6.1.3     6.1.3     7.1.0  node_modules/ionicons                            
jasmine-core                          4.3.0     4.3.0     4.6.0  node_modules/jasmine-core                        
jasmine-spec-reporter                 5.0.2     5.0.2     7.0.0  node_modules/jasmine-spec-reporter               
rxjs                                  7.5.7     7.5.7     7.8.0  node_modules/rxjs                                
ts-node                               8.3.0     8.3.0    10.9.1  node_modules/ts-node                             
typescript                            4.8.4     4.8.4     5.0.4  node_modules/typescript                          
zone.js                              0.11.8    0.11.8    0.13.0  node_modules/zone.js  

详细错误信息 #

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! 解析@angular/service-worker@15.2.6时出现问题
npm ERR! 已找到@angular/common@15.2.4
npm ERR! node_modules/@angular/common
npm ERR!   @angular/forms@15.2.4依赖@angular/common@"15.2.4"
npm ERR!   node_modules/@angular/forms
npm ERR!     @ionic/angular@6.6.3依赖@angular/forms@">=12.0.0"
npm ERR!     node_modules/@ionic/angular
npm ERR!       根项目依赖@ionic/angular@"^6.1.9"
npm ERR!     根项目依赖@angular/forms@"^15.0.0"
npm ERR!   @angular/google-maps@15.2.6依赖@angular/common@"^15.0.0 || ^16.0.0"
npm ERR!   node_modules/@angular/google-maps
npm ERR!     根项目依赖@angular/google-maps@"^15.2.6"
npm ERR!   另有5个依赖项（@angular/platform-browser等）
npm ERR!
npm ERR! 无法解析依赖：
npm ERR! @angular/service-worker@15.2.6依赖@angular/common@"15.2.6"
npm ERR! node_modules/@angular/service-worker
npm ERR!   @angular-devkit/build-angular@15.2.4可选依赖@angular/service-worker@"^15.0.0"
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     根项目开发依赖@angular-devkit/build-angular@"^15.0.0"
npm ERR!   根项目依赖@angular/service-worker@"^15.2.6"
npm ERR!
npm ERR! 冲突的peer依赖：@angular/common@15.2.6
npm ERR! node_modules/@angular/common
npm ERR!   @angular/service-worker@15.2.6依赖@angular/common@"15.2.6"
npm ERR!   node_modules/@angular/service-worker
npm ERR!     @angular-devkit/build-angular@15.2.4可选依赖@angular/service-worker@"^15.0.0"
npm ERR!     node_modules/@angular-devkit/build-angular
npm ERR!       根项目开发依赖@angular-devkit/build-angular@"^15.0.0"
npm ERR!     根项目依赖@angular/service-worker@"^15.2.6"
npm ERR!
npm ERR! 修复上游依赖冲突，或添加--force、--legacy-peer-deps参数重试
npm ERR! 以接受可能存在问题的依赖解析结果。
npm ERR!

解决方案 #

方法一：统一Angular核心包版本（推荐） #

@angular/service-worker@15.2.6要求@angular/common必须为15.2.6，而当前项目Angular核心包停留在15.2.4，先统一升级所有Angular核心包到15.2.6：

npm update @angular/common @angular/core @angular/forms @angular/compiler @angular/compiler-cli @angular/platform-browser @angular/platform-browser-dynamic @angular/router @angular/language-service

随后升级Angular CLI和构建工具到匹配版本：

npm update @angular/cli @angular-devkit/build-angular

完成后再次执行AngularFire安装命令：

ng add @angular/fire@latest --skip-confirmation

方法二：临时跳过peer依赖检查（应急用） #

如果暂时不想升级包，可以在安装命令后添加--legacy-peer-deps参数，跳过npm的严格peer依赖检查：

ng add @angular/fire@latest --skip-confirmation --legacy-peer-deps

注意：该方法可能引入潜在兼容性问题，仅作为临时解决方案，建议后续仍统一包版本。

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