在 @angular/fire 中的 Angular 中动态加载 Firebase 配置

Question

我有一个带有 @angular/fire v18 的 Angular v18 应用程序 我正在使用它的模块化 api 版本。我正在尝试在运行时动态加载 firebase 配置

目前我有以下代码。

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
  ],
  providers: [
    provideHttpClient(),
    provideFirebaseApp(() => initializeApp(firebaseConfig)), //load the firebaseConfig from an external file dynamically example from assets folder
    provideFirestore(() => {
      const providedFirestore = initializeFirestore(getApp(), {}, dbName);
      return providedFirestore;
    }),
    provideAuth(() => getAuth()),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

我有注入 Angular/Fire/Auth 和 Angular/Fire/FireStore 的服务，当我尝试在运行时加载配置时，这些服务会导致错误。

附上 chatgpt 对话的链接，用于我的尝试： https://chatgpt.com/share/4674b197-1a89-467d-bab0-5b8f254b8b72

它给出的选项都不起作用。

Answer 1

我找到了一种在

main.ts

文件中执行应用程序模块之前提取配置的方法。

fetch('./assets/config.json')
  .then(response => response.json())
  .then(config => {
    environment.firebaseConfig = config;
    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.error(err));
  })
  .catch(err => console.error('Could not load configuration', err));

然后正常使用

app.module.ts

中加载的配置。

  providers: [
    provideHttpClient(),
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideFirestore(() => {
      const app = getApp(); // Get the app instance
      const db = initializeFirestore(app, {}, dbName); // Replace 'dbName' with your database name
      return db;
    }),
    provideAuth(() => getAuth()),
  ],