Firebase Angular 4 Initialize based on node environment

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

Modified my answer

Tim Hovius
– Tim Hovius

2017-10-19 08:54:52 +00:00
Commented Oct 19, 2017 at 8:54 — Tim Hovius
– Tim Hovius, Commented Oct 19, 2017 at 8:54

ishaqbhojani · Accepted Answer · 2021-05-03 07:20:46Z

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

Tim Hovius · Accepted Answer · 2017-10-19 08:54:06Z

-1

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

edited Oct 19, 2017 at 8:54

answered Oct 19, 2017 at 8:22

Tim Hovius

7426 silver badges16 bronze badges

4 Comments

ishaqbhojani Over a year ago

Thanks for the answer I'm receiving this error Property 'getFirebaseConfig' does not exist on type 'typeof AppModule'

Tim Hovius Over a year ago

Yeah, because HttpClient is asynchronous, you have to wait for the request to finish

ishaqbhojani Over a year ago

Also, Can I return a Promise from getFirebaseConfig that resolves firebase config? If yes then how?

ishaqbhojani Over a year ago

I'm doing it like this static getFirebaseConfig(): Promise<FirebaseAppConfig> { return new Promise(resolve => { resolve(environment.firebase); }); } but it gives me the error (Error: Your API key is invalid, please check you have copied it correctly.)

Collectives™ on Stack Overflow

Firebase Angular 4 Initialize based on node environment

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related