node.js - Firebase Angular 4 เริ่มต้นตามสภาพแวดล้อมของ node

ฉันได้สร้างโปรเจกต์ Angular 4 ของฉันโดยใช้ Angular CLI ฉันกำลังปรับใช้แอปของฉันบน Heroku ฉันได้สร้าง Heroku Pipelines สำหรับสภาพแวดล้อม development และ production ฉันมีฐานข้อมูล Firebase สองตัวคือ development และ production และฉันต้องการให้แอป Angular 2 ของฉันเชื่อมต่อกับฐานข้อมูล Firebase ตามตัวแปรการกำหนดค่าของ Heroku

ฉันค้นหาในกูเกิลและพบว่าคำตอบนี้มีประโยชน์ตามที่ @yoni-rabinovitch แนะนำให้ส่งคำร้อง HTTP บนเซิร์ฟเวอร์น็อดเพื่อตรวจสอบสภาพแวดล้อมเมื่อแอปเริ่มทำงาน

ฉันเป็นผู้เริ่มต้นใน Angular 4 และ TypeScript และทั้งหมดที่ฉันต้องการทำคือการส่งคำขอ HTTP และเริ่มต้นโมดูล Firebase ตามการตอบสนอง

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

ความช่วยเหลือใด ๆ จะได้รับการชื่นชมอย่างสูง

คำตอบ #1

ฉันต้องสร้าง API บนเซิร์ฟเวอร์ของฉันและตั้งค่าฟังก์ชันด้านล่างในไฟล์ environments.ts

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

และเรียกมันจากไฟล์ main.ts

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

คำตอบ #2

คุณสามารถสร้างฟังก์ชันเพื่อรับการตั้งค่าได้:

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