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(...);

没有进行类型检查。

Answer 2

这个问题有here的解决方法，有了它，我能够使用最新版本的Firebase（3.6.7）和AngularFire2（2.0.0-beta.7）

它是如何工作的，我不知道，因为我只使用带有Plunker的SystemJS，但它涉及替换它：

firebase: {
    main: 'firebase.js'
}

用这个：

firebase: {
    defaultExtension: 'js',
    main: './firebase-browser.js'
}

在配置的packages属性中传递给System.config。

Angular 2和Firebase SDK

2 个答案: