使用Firebase与AngularFire2时遇auth服务重复注册错误求助

我之前在使用AngularFire2 + Firebase时也碰到过一模一样的错误，给你几个实用的排查方向，你可以一步步试：

• 检查AngularFireAuth模块的导入次数
  这是最常见的诱因：如果在根模块（app.module.ts）之外的其他模块（比如懒加载模块）也导入了AngularFireAuthModule，就会触发重复初始化auth服务的问题。正确的做法是只在根模块导入一次AngularFireAuthModule，其他需要使用认证功能的模块，直接通过依赖注入AngularFireAuth服务即可，不需要重复导入模块。

• 排查第三方库的隐式初始化
  如果你还用到了FirebaseUI这类第三方工具，它们可能会自行初始化Firebase Auth服务，和AngularFire2的实例产生冲突。这时候要确保第三方库使用的是你已经初始化好的Firebase实例：

  // 先获取已初始化的app实例
  const app = firebase.app();
  // 把这个实例传给第三方库（以FirebaseUI为例）
  const ui = new firebaseui.auth.AuthUI(app.auth());
  

• 避免直接调用原生Firebase Auth方法
  不要在多个组件/服务里直接调用firebase.auth()，而是始终依赖AngularFire2提供的AngularFireAuth服务。AngularFire已经帮我们管理了Firebase实例的生命周期，直接调用原生方法很容易导致重复注册。

• 清理依赖缓存，检查版本冲突
  有时候不同版本的firebase和@angular/fire包可能会引发冲突，或者node_modules里存在重复安装的包。你可以试试：

  1. 删除node_modules文件夹和package-lock.json（或yarn.lock）
  2. 重新执行npm install（或yarn install）
  3. 确保package.json里firebase和@angular/fire的版本是兼容的

最后给你一个标准的根模块配置示例，供你对比参考：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 只在这里初始化一次Firebase
    AngularFireModule.initializeApp(environment.firebaseConfig),
    // 只在这里导入一次Auth模块
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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