Firebase Angular 4根据节点环境进行初始化

Question

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

我在谷歌搜索并发现这个答案很有帮助,因为@ 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 {}

任何帮助将受到高度赞赏

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