Angular 2和Firebase SDK

我一直在试图让Angular2 quickstart应用程序与Firebase一起使用（请参阅此repository）。我安装了最新版本的Firebase，尝试使用SystemJS加载Firebase（请参阅systemjs.config.js），并尝试导入Firebase并使用功能initializeApp（请参阅app.component.ts）。但是，我一直在浏览器控制台中收到错误firebase.initializeApp is not a function。我是否正确使用SystemJS来加载firebase.js？Angular 2和Firebase SDK

注意：要复制错误，您应该只能执行npm install，然后再执行npm start。

来源

2016-12-15 James B

我在准备针对AngularFire2问题的Plunker时遇到了Firebase和SystemJS的问题。我不得不使用3.4.0版本。在后来的版本中，TypeScript定义中有一些SystemJS只是不喜欢，但我没有看到它。 – cartant

@cartant：是的，恢复到版本3.4.0似乎解决了SystemJS的问题。相应的'firebase.js'文件似乎在版本3.4和3.5之间发生了变化。后来的版本（> 3.4）似乎在'firebase.js'中有所有的javascript，并且没有模块导出。而v3.4只是'需要'其他文件并导出模块'firebase'。我有一种感觉，这是与在后来的版本中缺少模块导出有关，但不能确定。 –

@artem：D'oh！那时候你知道你一直在盯着屏幕太久......幸运的是只有一张测试床 - 呃。谢谢你让我知道。 –

一个变化：从

import * as firebase from 'firebase';

到

import {firebase} from '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(...);

不进行类型检查。

来源

2016-12-15 22:06:16 artem

针对此问题here有一个解决方法，并且使用它，我可以使用最新版本的Firebase（3.6.7）和AngularFire2（2.0.0-beta.7）获得一份工作。

它是如何工作的，我也没办法，因为我只用SystemJS与Plunker，但它涉及到更换这样的：在的的packages财产

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

：

firebase: { 
    main: 'firebase.js' 
}

与此配置传递给System.config。

来源

2017-02-01 03:06:45 cartant

Angular 2和Firebase SDK

回答

相关问题