在浏览器中加载应用程序时 Firebase JS SDK 警告（角度 v5）答案

【问题标题】：Firebase JS SDK warning while load application in browser (angular v5)在浏览器中加载应用程序时 Firebase JS SDK 警告（角度 v5）
【发布时间】：2018-06-10 15:53:50
【问题描述】：

当应用程序在浏览器中加载时，它会给出以下警告。所以无法为产品创建构建 (ng build --aot --prod)

    It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

我正在使用以下配置

Angular CLI: 1.5.0
Node: 9.8.0
Angular: 5.1.3

"firebase": "^5.0.4",
"angularfire2": "^5.0.0-rc.10"

请指点我哪里错了。

【问题讨论】：

标签： firebase angular5 angularfire

【解决方案1】：

没有什么真正的错误，它更多的是警告和最佳实践提示。

Firebase 由不同的服务/模块组成，例如实时数据库、Firestore、Auth 服务等。

在大多数项目中，不会使用所有这些服务，因此此警告表明，与其通过一次全局导入来导入所有服务，不如只导入应用程序中真正需要的服务。这样，您的构建将得到优化：生成的构建文件将仅包含您需要的 Firebase SDK 代码，而不会包含未使用的部分。

请参阅此文档项目：https://firebase.google.com/docs/web/setup，尤其是显示以下内容的部分：

如果你使用的是 Browserify 或 webpack 之类的打包工具，你可以 require() 你使用的组件。

根据您的评论更新：

使用 import 关键字，您应该执行以下操作：

import messaging from 'firebase/messaging';

【讨论】：

谢谢先生。它对我很有帮助。我添加了 require("firebase/messaging");这是工作。但我尝试使用角度方式，通过添加 import * as firebase from 'firebase';导入“firebase/消息”；它不工作。

【解决方案2】：

你没有分享你的 Angular 组件代码，所以我不能给你具体的代码。但是，我想，您像这样直接包含 Firebase，然后它会显示以下警告。

import * as firebase from 'firebase';     // It will throw warning    
import * as firebase from 'firebase/app'; // It will not throw any warning

然后根据您的需要包含特定的包。

import 'firebase/firestore';
import 'firebase/database';
import 'firebase/auth';

【讨论】：

【解决方案3】：

我添加以下代码，它对我有用

require("firebase/messaging");

【讨论】：