AngularFire如何异步加载Firebase配置完成应用初始化

原代码失效原因 #

• RxJS写法错误：pipe(c => config = c)不是合法的操作符写法，HttpClient.get()返回的冷Observable既没有正确解析返回值，也无法触发完结信号，会导致Angular一直卡在启动等待阶段。
• 时序无保障：Angular没有对imports数组内提供者和APP_INITIALIZER的执行顺序做强制保证，直接读取外部全局变量时，大概率会出现Firebase初始化时配置还未拉取完成的空值问题。

可直接落地的实现代码 #

核心思路是把配置拉取逻辑抽成共用的Promise，让APP_INITIALIZER和Firebase初始化等待同一份拉取结果，从根源避免竞态问题：

import { NgModule, APP_INITIALIZER, inject } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { initializeApp } from 'firebase/app';
import { provideFirebaseApp } from '@angular/fire/app';
import { firstValueFrom } from 'rxjs';
import { AppComponent } from './app.component';

// 全局缓存配置拉取Promise，保证全应用复用同一次请求
let configRequest: Promise<Record<string, any>> | null = null;

/**
 * 拉取远程配置，单例实现
 */
function loadFirebaseConfig(http: HttpClient): Promise<Record<string, any>> {
  if (!configRequest) {
    configRequest = firstValueFrom(
      http.get<{ firebase: Record<string, any> }>('/api/config')
    ).then(res => res.firebase);
  }
  return configRequest;
}

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    // Firebase初始化等待配置拉取完成后再执行
    provideFirebaseApp(async () => {
      const http = inject(HttpClient);
      const firebaseConfig = await loadFirebaseConfig(http);
      return initializeApp(firebaseConfig);
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: (http: HttpClient) => () => loadFirebaseConfig(http),
      deps: [HttpClient],
      multi: true
    }
  ]
})
export class AppModule { }

方案说明 #

• 配置拉取请求仅会触发一次，启动阶段所有依赖配置的逻辑都等待同一个Promise resolve，不存在时序竞态问题
• Angular会自动等待所有异步初始化逻辑（配置拉取、Firebase实例初始化）完成后再启动根组件，不会出现Firebase服务调用时实例未就绪的问题
• 完全不需要把配置打包进构建产物，满足「一次构建、任意环境运行、配置动态拉取」的部署要求

注意事项 #

• 请给配置拉取接口补充错误兜底逻辑（比如重试、失败跳转错误页），避免接口报错导致Promise reject引发应用白屏
• 如果使用Angular 13及以下版本，不支持在工厂函数内直接调用inject()，可以通过deps声明依赖，将HttpClient通过工厂参数传入即可
• @angular/fire的其他配套服务（Auth、Firestore、Storage等）会自动等待FirebaseApp初始化完成，不需要额外编写等待逻辑

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