Firebase Angular 4基于节点环境初始化

我已经使用 Angular CLI 构建了 Angular 4 项目。 我正在 Heroku 上部署我的应用程序，我已经为开发和生产环境创建了 heroku 管道。 我有两个 Firebase 数据库开发和生产，我希望我的 Angular 2 应用程序基于 Heroku 配置变量连接到 Firebase 数据库

我在谷歌上搜索并找到了这个answer https://stackoverflow.com/questions/41348751/heroku-pipeline-with-angular-2-environments/41349236#41349236很有帮助，@yoni-rabinovitch 建议在应用程序初始化时在节点服务器上发送 HTTP 请求来检查环境。

我是 Angular 4 和 typescript 的初学者，我需要实现的就是发送 HTTP 请求并根据响应初始化 firebase 模块。

应用程序模块.ts

import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.firebase)
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

任何帮助将不胜感激

我必须在我的服务器上创建一个 API 并设置下面的函数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;
      }
    };

并从调用它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));
})();