Loading Firebase Config dynamically in Angular in @angular/fire

Question

I have an angular v18 application with @angular/fire v18 I am using the modular api version of it. I am trying to load the firebase config dynamically during run time

Current I have the following code.

@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 {}

I have services which inject angular/fire/auth and angular/fire/firestore, which are causing error when I am trying to load the conifg during run time.

Attached a link to chatgpt conversations, for what I have tried: https://chatgpt.com/share/4674b197-1a89-467d-bab0-5b8f254b8b72

None of the options given by it worked.

Answer 1

I found a way of pulling the configuration even before the App Module is executed in the main.ts file.

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));

And then using the loaded config in the app.module.ts as normal.

  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()),
  ],