Firebase Angular 4 Initialize based on node environment - node.js

Question

I've built my Angular 4 project using the Angular CLI.
I am deploying my app on Heroku, I've created heroku pipelines for dev and production environment.
I have two firebase database dev and production and I want my angular 2 apps to connect to the firebase database based on heroku config variables
I searched on google and found this answer helpful as #yoni-rabinovitch suggested to send an HTTP request on node server to check for the environment when the app initializes.
I am a beginner in Angular 4 and typescript and all I need to implement is to send an HTTP request and initialize the firebase module based on the response.
app.module.ts
import { environment } from '../environments/environment';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
AngularFireModule.initializeApp(environment.firebase)
],
bootstrap: [AppComponent]
})
export class AppModule {}
Any help would be highly appreciated

Answer 1

I had to create an API on my server and set the function below in environments.ts file.
export let environment: any = {
production: false,
firebase: {...}
};
export const setEnvironment = async () => {
try {
const response = await fetch('api/checkEnvironment');
const json = await response.json();
if (json.data?.isPROD) {
// Prod Environment
environment = {
production: true,
firebase: {...}
};
}
} catch (error) {
throw error;
}
};
and call it from main.ts file
import {
environment,
setEnvironment,
} from './environments/environment';
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { FIREBASE_OPTIONS } from '#angular/fire';
(async () => {
await setEnvironment();
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic([
{
provide: FIREBASE_OPTIONS,
useValue: environment.firebase,
},
])
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
})();

Answer 2

You can create a function to receive the configuration:
import { environment } from '../environments/environment';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
AngularFireModule.initializeApp(AppModule.getFirebaseConfig())
],
bootstrap: [AppComponent]
})
export class AppModule {
static getFirebaseConfig(): FirebaseAppConfig {
// do http request
// return correct correct configuration depending on http request
return environment.firebase;
}
}