Angular 2 和 Firebase SDK

Question

我一直在尝试获取 Angular2 quickstart与 Firebase 一起工作的应用程序(请参阅此 repository)。我已经安装了最新版本的 Firebase，尝试使用 SystemJS 加载 firebase(参见 systemjs.config.js)并尝试导入 firebase 并使用函数 initializeApp(参见 app.component.ts)。但是，我不断在浏览器控制台中收到错误 firebase.initializeApp is not a function。我是否正确使用 SystemJS 来加载 firebase.js？

注意:要重现错误，您应该能够执行 npm install，然后执行 npm start。

Answer 1

一个变化:从

import * as firebase from 'firebase';

到

import {firebase} from 'firebase';

足以使您的示例与 firebase 3.6 一起工作。

但是，我会说它的工作是偶然的。 firebase.js看起来根本不像一个模块，它不使用 module.exports或者 amd define ，它只是创建全局变量 firebase具有以下属性:

INTERNAL: Object
Promise: Promise()
SDK_VERSION: "3.6.4"
User: (a, b, c)
__esModule: true
app: a(a)
apps: (...)
get apps: ()
auth: (c)
database: (c)
default: Object
initializeApp: (a, c)
messaging: (c)
storage: (c)
__proto__: Object

可能是 __esModule 的存在这使得 SystemJS 将其包装在另一个对象中 - 如果您在调试器中查看 import * as firebase from 'firebase' 的结果它包含一个也名为 firebase 的属性这是您实际需要的模块。

有趣的是，firebase.d.ts是这样写的

import {firebase} from 'firebase'; 

firebase.initializeApp(...);

有效，但看似等价

import * as firebase from 'firebase';

firebase.firebase.initializeApp(...);

不进行类型检查。