Angular集成Firestore报错：Firestore已启动无法修改设置求解决

你遇到的核心问题是：通过FirestoreService调用Firestore方法时，放在app.component.ts的ngOnInit里会触发页面持续刷新，停止后出现Firestore初始化配置冲突的错误；但直接把代码写在ngOnInit或通过按钮调用就完全正常。结合你在新项目测试正常的情况，基本可以确定是现有项目的Firebase依赖、配置文件存在损坏或冲突。

以下是针对Angular项目的完整清理重装流程：

• 卸载所有Firebase相关依赖
  在项目根目录执行命令，彻底移除Angular Firebase和Firebase核心库：

npm uninstall @angular/fire firebase

同时清理npm缓存，避免残留文件干扰：

npm cache clean --force

• 删除残留配置文件

  • 删除项目根目录下的firebase.json、.firebaserc文件
  • 打开src/environments下的environment.ts和environment.prod.ts，删掉其中所有Firebase相关的配置代码

• 重新安装依赖
  安装最新稳定版的Angular Firebase和Firebase：

npm install @angular/fire firebase

• 重新初始化Firebase配置
  执行初始化命令，按向导重新配置项目所需的Firebase功能：

npx firebase init

完成后将生成的配置代码重新复制到对应环境文件中。

• 验证修复效果
  重启Angular项目：

ng serve

再次在app.component.ts的ngOnInit中调用FirestoreService的getCollection方法，确认问题是否解决。

• 检查app.module.ts是否重复导入了FirestoreModule或重复配置Firebase相关模块
• 确认FirestoreService的providedIn: 'root'没有被重复注册在其他模块中

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