Angular项目中@angular/fire模块找不到问题求助

问题背景 #

项目原本运行正常，修改数据结构后出现@angular/fire模块找不到的依赖错误，已通过git reset --hard回滚所有代码变更，但问题仍未解决。

已尝试的无效操作 #

• npm install
• npm i firebase @angular/fire --save
• npm cache clean --force
• 检查所有依赖项

项目配置信息 #

package.json内容 #

{"name": "Radimdienst","version": "2.1.1","author": "Muhammed","homepage": "https://radimdienst.de","scripts": {"ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e"},"private": true,"dependencies": {"@angular/common": "^15.0.4","@angular/core": "^15.0.4","@angular/fire": "^7.5.0","@angular/forms": "^15.0.4","@angular/platform-browser": "^15.0.4","@angular/platform-browser-dynamic": "^15.0.4","@angular/router": "^15.0.4","@capacitor/android": "^4.6.1","@capacitor/core": "^4.6.1","@ionic/angular": "^6.4.1","@ionic/pwa-elements": "^3.1.1","capacitor": "^0.0.3","firebase": "^9.17.0","pdfmake": "^0.2.7","rxjs": "~7.8.0","tslib": "^2.4.1","zone.js": "~0.12.0"},"devDependencies": {"@angular-devkit/build-angular": "^15.0.4","@angular/cli": "^15.0.4","@angular/compiler": "^15.0.4","@angular/compiler-cli": "^15.0.4","@angular/language-service": "^15.0.4","@capacitor/cli": "4.6.1","@ionic/angular-toolkit": "^7.0.0","@types/jasmine": "~4.3.1","@types/jasminewd2": "~2.0.10","@types/node": "^18.11.17","codelyzer": "^6.0.2","jasmine-core": "~4.5.0","jasmine-spec-reporter": "~7.0.0","karma": "~6.4.1","karma-chrome-launcher": "~3.1.1","karma-coverage": "~2.2.0","karma-coverage-istanbul-reporter": "~3.0.3","karma-jasmine": "~5.1.0","karma-jasmine-html-reporter": "^2.0.0","protractor": "~7.0.0","ts-node": "~10.9.1","tslint": "^6.1.3","typescript": "~4.8.4"},"description": "An Ionic project"}

报错信息 #

./node_modules/@angular/fire/fesm2015/angular-fire-app-check.js:7:0-47 - Error: Module not found: Error: Default condition should be last one

./node_modules/@angular/fire/fesm2015/angular-fire-app-check.js:9:0-200 - Error: Module not found: Error: Default condition should be last one
./node_modules/@angular/fire/fesm2015/angular-fire.js:3:0-39 - Error: Module not found: Error: Default condition should be last one

./node_modules/@angular/fire/fesm2015/angular-fire.js:4:0-70 - Error: Module not found: Error: Default condition should be last one

./node_modules/@angular/fire/fesm2015/angular-fire.js:5:0-66 - Error: Module not found: Error: Default condition should be last one

./node_modules/@angular/fire/fesm2015/angular-fire.js:6:0-49 - Error: Module not found: Error: Default condition should be last one

npm ls输出 #

+-- __ngcc_entry_points__.json@ extraneous
+-- @angular-devkit/build-angular@15.1.4
+-- @angular/cli@15.1.4
+-- @angular/common@15.1.3
+-- @angular/compiler-cli@15.1.3
+-- @angular/compiler@15.1.3
+-- @angular/core@15.1.3
+-- @angular/fire@7.5.0
+-- @angular/forms@15.1.3
+-- @angular/language-service@15.1.3
+-- @angular/platform-browser-dynamic@15.1.3
+-- @angular/platform-browser@15.1.3
+-- @angular/router@15.1.3
+-- @capacitor/android@4.6.2
+-- @capacitor/cli@4.6.1
+-- @capacitor/core@4.6.2
+-- @ionic/angular-toolkit@7.0.0
+-- @ionic/angular@6.5.2
+-- @ionic/pwa-elements@3.1.1
+-- @types/jasmine@4.3.1
+-- @types/jasminewd2@2.0.10
+-- @types/node@18.11.18
+-- capacitor@0.0.3
+-- codelyzer@6.0.2
+-- firebase@9.17.0
+-- jasmine-core@4.5.0
+-- jasmine-spec-reporter@7.0.0
+-- karma-chrome-launcher@3.1.1
+-- karma-coverage-istanbul-reporter@3.0.3
+-- karma-coverage@2.2.0
+-- karma-jasmine-html-reporter@2.0.0
+-- karma-jasmine@5.1.0
+-- karma@6.4.1
+-- pdfmake@0.2.7
+-- protractor@7.0.0
+-- rxjs@7.8.0
+-- ts-node@10.9.1
+-- tslib@2.5.0
+-- tslint@6.1.3
+-- typescript@4.8.4
`-- zone.js@0.12.0

解决方案 #

从报错信息Default condition should be last one和依赖版本差异来看，问题源于npm版本兼容性或依赖版本不一致，按以下步骤操作：

1. 彻底清理依赖缓存与文件

   • 删除项目根目录下的node_modules文件夹
   • 删除package-lock.json文件
   • 执行npm cache clean --force

2. 升级npm到最新稳定版

   npm install -g npm@latest
   

3. 锁定依赖版本并重新安装
   由于npm ls显示Angular版本自动升级到15.1.3，与package.json中的15.0.4不一致，执行以下命令强制安装指定版本：

   npm install @angular/common@15.0.4 @angular/core@15.0.4 @angular/forms@15.0.4 @angular/platform-browser@15.0.4 @angular/platform-browser-dynamic@15.0.4 @angular/router@15.0.4 @angular-devkit/build-angular@15.0.4 @angular/cli@15.0.4 @angular/compiler@15.0.4 @angular/compiler-cli@15.0.4 @angular/language-service@15.0.4
   

   之后执行完整安装：

   npm install
   

4. 启用Angular兼容性编译器（ngcc）
   在package.json的scripts中添加：

   "postinstall": "ngcc"
   

   然后重新执行npm install，确保所有依赖被正确编译。

5. 验证依赖版本一致性
   执行npm ls检查所有Angular核心包版本是否与package.json中指定的15.0.4一致，@angular/fire和firebase版本保持7.5.0和9.17.0即可。

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