Unable to load dynamic firebase config, tried many ways but fail to load.

[bbright-dinesh]

Version info

Angular: 14
Firebase: 9.16.0
AngularFire: ^7.4

How to reproduce these conditions

I am using below firebase initialization in app.module.ts, but I would like to load firebaseConfig from a REST api call result.
Tried many ways, but failed to achieve this functionality.

AngularFirestoreModule,
AngularFireAuthModule,
AngularFireModule.initializeApp(environment.firebaseConfig),

Would someone kind enough to help us here please

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[bbright-dinesh]

Somehow able to solve this by loading the settings from API and setting them in localstorage.
For the first time when the app loads it fails but later onwards it will fetch the data from localStorage.

This may be helpful to others.

main.ts

getConfig().then(async config => {
if (config) {
setFirebaseConfig(config);
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err));
}
});

API getConfig()

export async function getConfig() {
return fetch('http://localhost:8081/v1/firebase-config').then((response) => {
return response.json();
});
}

appModule.ts

AngularFireModule.initializeApp({
apiKey: localStorage.getItem('apiKey') ?? '',
authDomain: localStorage.getItem('authDomain') ?? '',
projectId: localStorage.getItem('projectId') ?? '',
storageBucket: localStorage.getItem('storageBucket') ?? '',
messagingSenderId: localStorage.getItem('messagingSenderId') ?? '',
appId: localStorage.getItem('appId') ?? '',
measurementId: localStorage.getItem('measurementId') ?? '',
})