Angular 15独立AppComponent集成AngularFireAuth注入失败求助

问题原因 #

你当前仅在main.ts中配置了Firestore的初始化提供者，但缺少Firebase Auth对应的初始化配置。AngularFireAuth依赖provideFirebaseAuth来创建Auth实例的提供者，没有该配置时，DI容器无法找到AngularFireAuth的注入令牌，最终导致注入失败。

解决方案 #

步骤1：导入Firebase Auth初始化函数 #

在main.ts顶部添加必要的导入：

import { provideFirebaseAuth, getAuth } from '@angular/fire/auth';

步骤2：添加Firebase Auth的提供者配置 #

修改main.ts中的providers数组，加入Auth的初始化配置：

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      provideFirebaseApp(() => initializeApp(firebaseConfig)),
      // 新增Firebase Auth初始化配置
      provideFirebaseAuth(() => getAuth())
    ),
    importProvidersFrom(
      provideFirestore(() => getFirestore())
    ),
    // 其他自定义提供者...
  ]
})

步骤3：验证组件注入逻辑 #

你的AppComponent中已正确导入AngularFireAuthModule，这部分无需调整。完成上述配置后，即可在构造函数中正常注入AngularFireAuth：

constructor(private afAuth: AngularFireAuth) {}

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