如何为生产构建angularfire2

Question

在运行使用 AngularFire2 的我的 Angular 应用程序的生产构建之后，我仍然在控制台中看到以下警告：

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>';

我的应用程序中我直接从 firebase 导入的唯一地方是这里：

import { auth } from 'firebase';

...

constructor(private afAuth: AngularFireAuth) {}

...

login() {
 this.afAuth.auth.signInWithPopup(new auth.GithubAuthProvider())
 .then(result => {
   console.log('sign in result', result);
 })
 .catch(e => console.error('error signing in'));
}

我项目中所有其他与 firebase 相关的代码都是从 angularfire2 导入的。我尝试按照这样的建议导入 auth：

import firebase from 'firebase/app';
import 'firebase/auth';

但这不起作用。我做错了什么？

Answer 1

好的，我想我明白了。这有效：

添加这些导入：

import * as firebase from 'firebase/app';
import 'firebase/auth';

并替换：

new auth.GithubAuthProvider()

与：

new firebase.auth.GithubAuthProvider()

Answer 2

您必须导入 firebase 应用程序

import * as firebase from 'firebase/app';

以及您在应用程序中使用的任何其他 firebase 服务

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

查看官方 firebase 文档here。

Answer 3

这个让我一整天都抓狂的问题……我正在使用 Angular 6 和最新的 AngularFire2，根据文档进行了正确的导入。但是我导入了 firestore 以访问 writeBatch class。我终于意识到我错误地使用了错误的导入，导致 firebase 开发 SDK 控制台警告。

所以要在打字稿中导入 class 之类的 writeBatch，我必须更改：

import { firestore } from 'firebase';

至：

import { firestore } from 'firebase/app';

删除了警告。我不认为文档提到为什么你会使用 'firebase' 而不是 'firebase/app' 但在我查看 js 包文件之前，我并不清楚开发与生产之间的区别。希望这可以帮助！

如何为生产构建angularfire2

How to build angularfire2 for production

firebase

angularfire2

angular