Dynamic loading of configuration to initialize firebase

[PhantomLinker]

For better CI/CD I am trying to load the firebase configuration from an external source before bootstrapping the app.module.ts. I tried many solutions which were suggested by others, e.g.: the solution suggested by @efraespada in #1095 or this guide by sakshi subedi but I couldn't get them to work on my end.

Also the APP_INITIALIZER does not work, as the providers don't block the execution of the imports.

Being able to use useFactory as suggested in #2451 might solve this issue by allowing something like this:

 {
        provide: FIREBASE_OPTIONS,
        useFactory: loadFirebaseConfigFromExternalSource,
}

But with the initialisation of angularfire since V7 an approach like this would be even better:

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        ...
        provideFirebaseApp( async () => {
            const fb_config = await loadFirebaseConfigFromExternalSource();
            return initializeApp(fb_config);
        }),
        provideFirestore(() => getFirestore()),
        ...
    ],
...

So is there a way to load the firebase config via a http get before initialising the app? If not, would it be possible to include such a feature by also handling () => Promise<FirebaseApp> instead of only () => FirebaseApp in provideFirebaseApp?

Thanks in advance

[jainut20]

I am having a similar situation, did you manage to find a solution to it ?

[PhantomLinker]

Hi,
Sorry for the late reply. I just saw your comment. Yes, I did manage to find a solution. I simply switched to the official firebase package: https://www.npmjs.com/package/firebase

This package does not require any import of firebase in the app.module.ts and has a different initialization approach. It's harder to use than angularfire but it's also more flexible.