Angular项目安装Firebase时npm依赖树冲突问题的解决方法

问题根源 #

你的项目存在Angular版本严重不一致的问题：多数核心包（如@angular/core、@angular/common）为15.2.x版本，但@angular/compiler、@angular/compiler-cli停留在10.2.5，同时@angular-devkit/build-angular是8.x版本，与15.x的Angular CLI不兼容。@angular/fire@7.6.1要求Angular 12+，版本混乱直接导致依赖树无法解析。

解决方案 #

1. 统一所有Angular依赖版本

修改package.json，将所有Angular相关包的版本统一为15.2.x，确保核心包版本完全匹配：

修改后的dependencies片段：

"dependencies": {
  "@angular/animations": "^15.2.0",
  "@angular/common": "^15.2.0",
  "@angular/compiler": "^15.2.0",
  "@angular/core": "^15.2.0",
  "@angular/fire": "^7.6.1",
  "@angular/forms": "^15.2.0",
  "@angular/platform-browser": "^15.2.0",
  "@angular/platform-browser-dynamic": "^15.2.0",
  "@angular/router": "^15.2.0",
  "firebase": "^9.23.0",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.12.0"
}

修改后的devDependencies片段：

"devDependencies": {
  "@angular-devkit/build-angular": "^15.2.1",
  "@angular/cli": "~15.2.1",
  "@angular/compiler-cli": "^15.2.0",
  "@types/jasmine": "~4.3.0",
  "jasmine-core": "~4.5.0",
  "karma": "~6.4.0",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage": "^1.1.2",
  "karma-jasmine": "~5.1.0",
  "karma-jasmine-html-reporter": "~2.0.0",
  "typescript": "~4.9.4"
}

2. 清理旧依赖并重新安装

执行以下命令彻底清理残留依赖并重新安装：

# 删除node_modules文件夹（Windows用 rmdir /s/q node_modules）
rm -rf node_modules
# 删除package-lock.json（Windows用 del package-lock.json）
rm package-lock.json
# 重新安装依赖
npm install

3. 临时应急方案（不推荐长期使用）

如果暂时无法升级Angular版本，可通过跳过peer依赖检查临时解决，但可能引发运行时异常：

npm install --legacy-peer-deps

关键说明 #

Angular对核心包版本一致性要求极高，所有@angular/*包必须保持相同主版本号，否则必然出现依赖冲突。@angular/fire@7.6.1与Angular 15.x完全兼容，统一版本后即可正常完成安装。

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