无法在app.component.ts中添加Service作为Provider，遇Firebase初始化错误

看起来你遇到了Angular服务注入时的经典时机问题——你的UserService在Firebase完成初始化之前就尝试访问它的API了，所以才会抛出Firebase: No Firebase App '[DEFAULT]' has been created错误。别担心，我们一步步来解决它：

核心原因分析 #

Angular的根级服务（比如你用providedIn: 'root'声明的UserService）会在应用启动的早期就被实例化。如果你的服务构造函数里直接调用了Firebase的API（比如Auth的authState），而Firebase还没通过initializeApp完成初始化，就会触发这个错误。哪怕你在app.module.ts里配置了Firebase，也可能因为依赖注入的执行顺序问题导致服务先于Firebase就绪。

解决方案步骤 #

1. 确认Firebase在AppModule中正确同步初始化 #

首先确保你的app.module.ts里是同步初始化Firebase，不要把初始化逻辑放在组件的ngOnInit里：

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

import { AppComponent } from './app.component';
import { UserService } from './user-service';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 这里必须用同步初始化，传入你的环境配置
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule // 别忘了导入Auth模块
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 调整UserService的逻辑，避免提前调用Firebase API #

修改你的UserService，不要在构造函数里直接执行依赖Firebase的操作，而是用Observable暴露用户状态，让组件在合适的时机订阅：

// user-service.ts
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  // 用Observable保存用户状态，AngularFireAuth内部会处理初始化时机
  private currentUser$: Observable<any>;

  constructor(private afAuth: AngularFireAuth) {
    this.currentUser$ = this.afAuth.authState;
  }

  // 提供公共方法供组件获取用户数据
  getCurrentUser(): Observable<any> {
    return this.currentUser$;
  }
}

3. 在AppComponent中延迟订阅用户状态 #

在AppComponent的ngOnInit里订阅用户数据，而不是构造函数，确保Firebase已经初始化完成：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from './user-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  currentUser: any;

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    // 在这里订阅，此时Firebase已经完成初始化
    this.userService.getCurrentUser().subscribe(user => {
      this.currentUser = user;
      // 处理登录用户的逻辑，比如更新UI、存储用户信息等
    });
  }
}

4. 极端情况：用APP_INITIALIZER强制等待Firebase初始化 #

如果以上步骤还没解决问题，可以用Angular的APP_INITIALIZER钩子，强制应用等待Firebase Auth就绪后再启动：

// app.module.ts
import { NgModule, APP_INITIALIZER } from '@angular/core';
// 其他导入保持不变
import { AngularFireAuth } from '@angular/fire/compat/auth';

// 定义初始化函数，等待Firebase Auth准备完成
function waitForFirebaseAuth(afAuth: AngularFireAuth): () => Promise<void> {
  return () => new Promise(resolve => {
    // 订阅authState，直到初始化完成或出错
    const subscription = afAuth.authState.subscribe({
      next: () => {
        subscription.unsubscribe();
        resolve();
      },
      error: () => {
        subscription.unsubscribe();
        resolve();
      }
    });
  });
}

@NgModule({
  // 其他配置保持不变
  providers: [
    UserService,
    {
      provide: APP_INITIALIZER,
      useFactory: waitForFirebaseAuth,
      deps: [AngularFireAuth],
      multi: true // 允许多个初始化函数
    }
  ]
})
export class AppModule { }

这样应用会在Firebase Auth完全就绪后才启动，此时UserService注入时就不会再遇到初始化错误了。

内容的提问来源于stack exchange，提问作者João Pedro