可选择在Angular应用中加载Firebase模块。

Question

我正在做一个Angular应用，打算部署在多个Firebase项目中。我正在使用AngularFire。当为应用程序服务时，Firebase通过一个保留的托管URL来提供它的包。所以我在index.html中这样做。

<script src="/__/firebase/7.14.4/firebase-app.js"></script>
<script src="/__/firebase/init.js"></script>
<app-root></app-root>

我在app.module.ts中做了这个动作

import { AngularFireModule } from '@angular/fire';
...
imports: [AngularFireModule]

我在main.ts中这样做，其中 environment.firebase 是一个有效的Firebase配置。

function getConfig(): Observable<any> {
  return environment.production ? getConfigFromReservedURL() : of(environment.firebase);
}

function getConfigFromReservedURL(): Observable<any> {
  return from(fetch('/__/firebase/init.json').then(response => response.json()));
}

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

ng serve 在这里很好用 ng build --prod --aot 正确地从 /__/firebase/init.json.

但当我 firebase deploy 到服务器，我得到了警告："@firebaseapp: 警告："@firebaseapp: Warning: Firebase已经在全局范围内定义。请确保Firebase库只被加载一次。"

出现这种情况是因为我使用了 npm install firebase 来安装Firebase依赖关系，以便在应用程序中正常导入，如 import { auth } from 'firebase/app';. 所以Typescript是将Firebase SDK编译到应用程序中。但是SDK需要通过脚本元素进行初始化，我不希望SDK初始化被内置到应用程序中。

我如何告诉构建过程，当构建应用程序用于生产时，将Firebase SDK作为一个环境模块处理，同时保持它作为一个正常的包用于 ng serve?

Answer 1

一个同事帮我找到了问题所在。这个代码在index.html中是不需要的。

<script src="/__/firebase/7.14.4/firebase-app.js"></script>
<script src="/__/firebase/init.js"></script>

Firebase的 文件 说'除了托管SDK本身，保留的命名空间还提供了所有必要的配置，以初始化与托管站点相关联的Firebase项目的SDK。这个Firebase配置和SDK初始化是由一个你可以直接包含的脚本提供的...... 它确实提供了所有必要的配置，但如果你已经通过NPM安装了Firebase包，那么在Angular中其实并不需要这些。