时间戳

首页 > 解决方案 > 可选择在 Angular 应用中加载 Firebase 模块

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

问题描述

我正在开发一个旨在部署在多个 Firebase 项目中的 Angular 应用程序。我正在使用 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到服务器时，我收到警告：“@firebase/app：警告：Firebase 已在全局范围内定义。请确保 Firebase 库只加载一次。”

发生这种情况是因为我曾经npm install firebase安装 Firebase 依赖项，以便正常导入可以在应用程序中工作，例如import { auth } from 'firebase/app';. 所以 Typescript 正在将 Firebase SDK 编译到应用程序中。但是 SDK 需要通过 script 元素进行初始化；除此之外，我不希望 SDK 初始化被烘焙到应用程序中。

在为生产构建应用程序时，如何告诉构建过程将 Firebase SDK 视为环境模块，同时保持其作为普通包可用ng serve？

标签： angulartypescriptfirebasefirebase-hosting

解决方案

一位同事帮我找出了问题所在。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 中实际上不需要这些。

推荐阅读