how to Initialize the config dynamically?

[imalitavakoli]

I'm looking for a simple way to initializeApp later inside of the app.component.ts NOT in my app.config.ts. I need to do this because of my current app implementation and requirements...

Currently, here's my app.config.ts file:

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getAnalytics, provideAnalytics } from '@angular/fire/analytics';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() =>
      initializeApp({
        apiKey: 'xxx',
        authDomain: 'xxx.firebaseapp.com',
        databaseURL: 'https://xxx.firebaseio.com',
        projectId: 'xxx',
        storageBucket: 'xxx',
        messagingSenderId: '123',
        appId: 'xxx',
        measurementId: 'xxx',
      }),
    ),
    provideAnalytics(() => getAnalytics()),
    ...
  ],
  ...
})

Any help is so appreciated ❤️

Version info

Angular: 17.3.3

Firebase: ^10.13.1

AngularFire: ^18.0.1