将默认Firebase配置注入Angular App

时间:2019-06-03 16:24:31

标签: angular firebase

我需要使用Firebase托管中的默认配置来配置应用程序,因为我正在将其部署到多个项目中。

如果这是普通的html应用,则可以使用:

renderRow

但是我使用的是有角度的应用程序,因此我想将其注入应用程序模块的初始化中。我试图做这样的事情:

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/6.1.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#reserved-urls -->

<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>

那只是我的应用程序模块的一部分,但是您可以了解一下。如果它正在生产中,我想从let firebaseConfig = environment.firebase; if (environment.production) { console.log('loading init'); fetch('/__/firebase/init.json').then(async response => { firebaseConfig = await response.json(); }); } @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AngularFireModule.initializeApp(firebaseConfig), 中提取它,但如果不是,我想从环境设置中提取它。

由于这是一个异步操作,我如何使其工作?

1 个答案:

答案 0 :(得分:3)

您可以尝试以下一种方法:

app.module.ts

@NgModule({
  ...
  imports: [
    BrowserModule,
    AngularFireModule,
  ]
  ...

main.ts

import { FirebaseOptionsToken } from '@angular/fire';

if (environment.production) {
  enableProdMode();
}

function loadConfig() {
  return environment.production ?
    fetch('/__/firebase/init.json')
      .then(response => response.json())
    : Promise.resolve(environment.firebase);
}

(async () => {
  const config = await loadConfig();

  platformBrowserDynamic([{ provide: FirebaseOptionsToken, useValue: config }])
     .bootstrapModule(AppModule)
     .catch(err => console.error(err));
})();