node.js - Firebase Angular 4 基于 Node 环境初始化

Question

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

我在谷歌上搜索并找到了这个 answer @yoni-rabinovitch 建议在应用程序初始化时在 Node 服务器上发送 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 {}

非常感谢任何帮助

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