如何在Angular 7中通过HTTP请求获取配置后动态初始化Firebase

Absolutely, you can initialize Firebase dynamically after fetching config via HTTP—you just need to adjust how you set up AngularFire and integrate it with Angular's dependency injection (DI) system, since the static initializeApp in AppModule isn't the only way.

Here's a step-by-step breakdown of how to make this work:

1. Remove Static Initialization from AppModule #

First, strip out the initializeApp call from your AppModule imports—we'll handle initialization dynamically instead. Keep just the base AngularFireModule import:

@NgModule({ 
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    AngularFireModule, // Only import the module, no initializeApp call
    AngularFirestoreModule,
    IonicModule.forRoot(),
    AppRoutingModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Update Your FirebaseSyncService for Dynamic Initialization #

Directly calling AngularFireModule.initializeApp() in your service won't wire up the AngularFire services to Angular's DI automatically. Instead, we need to initialize the Firebase core app, then manually provide the AngularFire services to the DI system.

Here's a revised version of your service:

import { Injectable, Injector, NgModuleRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AngularFireModule, FirebaseApp } from '@angular/fire';
import { AngularFirestore, AngularFirestoreModule } from '@angular/fire/firestore';

@Injectable({ 
  providedIn: 'root'
})
export class FirebaseSyncService {
  private firestore?: AngularFirestore;
  private isInitialized = false;

  constructor(
    private httpClient: HttpClient,
    private injector: Injector,
    private moduleRef: NgModuleRef<any>
  ) {}

  async initializeFirebase(): Promise<void> {
    if (this.isInitialized) return;

    try {
      // Fetch your Firebase config via HTTP
      const url = 'http://localhost:3000/get-config?db=12345';
      const response = await this.httpClient.get<any>(url).toPromise();

      // Initialize the core Firebase app
      const firebaseApp = await import('firebase/app').then(app => app.initializeApp(response.config));

      // Initialize AngularFire and inject its services into DI
      const afModule = AngularFireModule.initializeApp(response.config);
      const moduleInjector = afModule.create(this.injector);
      this.firestore = moduleInjector.get(AngularFirestore);

      // Make the Firebase app and Firestore available globally in DI
      this.moduleRef.injector.get(Injector).provide({
        provide: FirebaseApp,
        useValue: firebaseApp
      });
      this.moduleRef.injector.get(Injector).provide({
        provide: AngularFirestore,
        useValue: this.firestore
      });

      this.isInitialized = true;
    } catch (error) {
      console.error('Failed to initialize Firebase:', error);
      // Add error handling here (e.g., retry logic, user notification)
      throw error;
    }
  }

  // Example method to use the initialized Firestore
  getCollectionData(collectionPath: string) {
    if (!this.isInitialized || !this.firestore) {
      throw new Error('Firebase not initialized. Call initializeFirebase() first.');
    }
    return this.firestore.collection(collectionPath).valueChanges();
  }
}

3. Ensure Initialization Runs Before App Load #

To prevent components from trying to use Firebase services before initialization completes, use Angular's APP_INITIALIZER token to trigger the initialization when the app starts up.

Add this to your AppModule providers:

import { APP_INITIALIZER } from '@angular/core';
import { FirebaseSyncService } from './firebase-sync.service';

// Factory function to initialize Firebase on app start
function initFirebaseFactory(firebaseSync: FirebaseSyncService) {
  return () => firebaseSync.initializeFirebase();
}

@NgModule({
  // ... existing imports, declarations
  providers: [
    StatusBar,
    SplashScreen,
    {provide: RouteReuseStrategy, useClass: IonicRouteStrategy},
    {
      provide: APP_INITIALIZER,
      useFactory: initFirebaseFactory,
      deps: [FirebaseSyncService],
      multi: true
    }
  ],
})
export class AppModule { }

Key Notes #

• Error Handling: Make sure to add robust error handling in the initializeFirebase method—if the HTTP request fails or Firebase initialization errors out, you'll want to notify the user or retry.
• Multiple Apps: If you need to initialize multiple Firebase apps, pass a second argument to initializeApp (the app name) and specify that name when injecting AngularFire services.
• Lazy Loading: If you're using lazy-loaded modules, ensure they don't try to access Firebase services until initialization is complete.

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