Angular 18中@angular/fire动态加载Firebase配置问题求助

问题根源 #

直接在provideFirebaseApp中同步引用firebaseConfig会导致Firebase服务初始化时，配置文件还未完成异步加载，进而触发Auth、Firestore服务的初始化错误。必须确保Firebase配置加载完成后，再初始化Firebase应用及相关服务。

实现步骤 #

1. 创建配置加载服务 #

新建firebase-config.service.ts，负责从assets目录异步加载Firebase配置：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class FirebaseConfigService {
  private config: any;

  constructor(private http: HttpClient) {}

  // 异步加载assets中的配置文件
  loadConfig() {
    return this.http.get('/assets/firebase-config.json')
      .pipe(
        tap(config => this.config = config)
      )
      .toPromise();
  }

  // 获取已加载的配置
  getConfig() {
    return this.config;
  }
}

2. 在assets目录添加配置文件 #

创建assets/firebase-config.json，填入你的Firebase项目配置：

{
  "apiKey": "你的API_KEY",
  "authDomain": "你的AUTH_DOMAIN",
  "projectId": "你的PROJECT_ID",
  "storageBucket": "你的STORAGE_BUCKET",
  "messagingSenderId": "你的MESSAGING_SENDER_ID",
  "appId": "你的APP_ID"
}

3. 修改AppModule配置 #

使用APP_INITIALIZER确保配置加载完成后再初始化Firebase服务：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { provideHttpClient } from '@angular/common/http';
import { provideFirebaseApp, initializeApp, getApp } from '@angular/fire/app';
import { provideFirestore, initializeFirestore } from '@angular/fire/firestore';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { FirebaseConfigService } from './firebase-config.service';

// 初始化Firebase应用的工厂函数，依赖已加载的配置
export function initializeFirebaseAppFactory(configService: FirebaseConfigService) {
  return () => initializeApp(configService.getConfig());
}

// 应用初始化前加载Firebase配置的工厂函数
export function appInitializerFactory(configService: FirebaseConfigService) {
  return () => configService.loadConfig();
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, AppRoutingModule],
  providers: [
    provideHttpClient(),
    // 注册应用初始化器，确保配置加载完成
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [FirebaseConfigService],
      multi: true
    },
    // 使用加载完成的配置初始化Firebase应用
    provideFirebaseApp(initializeFirebaseAppFactory),
    provideFirestore(() => {
      const providedFirestore = initializeFirestore(getApp(), {}, '你的数据库名称');
      return providedFirestore;
    }),
    provideAuth(() => getAuth()),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

关键说明 #

• APP_INITIALIZER会在Angular应用启动前执行指定的异步逻辑，确保Firebase配置加载完成后再初始化应用。
• 所有Firebase服务（Auth、Firestore）的初始化依赖getApp()，而getApp()会等待initializeApp完成，因此不会出现配置未就绪的问题。

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