Angular 2和Firebase SDK [英] Angular 2 and Firebase SDK

问题描述

我一直在试着让Angular2 快速启动应用程序正常运行使用Firebase（请参阅此资源库）。我已经安装了最新版本的Firebase，试图使用SystemJS加载Firebase（参见 systemjs.config.js ）并尝试导入firebase并使用函数 initializeApp （请参阅 app.component.ts ）。但是，我一直在浏览器控制台中发现错误 firebase.initializeApp不是一个函数。我正确使用SystemJS来加载 firebase.js ？

$ b 注意：要复制错误，你应该可以做到 npm install ，然后是 npm start 。

解决方案

一个改变：从

  import * as firebase来自firebase; 
  

到

 从'firebase'导入{firebase}; 
  

足以让您的示例能够与firebase 3.6一起使用。

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

<$ （$）b











$ __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 *的结果作为firebase的firebase ，它将包含也称为 firebase 这是你需要的实际模块。

有趣的是， firebase.d.ts 是用这样一种方式写成：

 从'firebase'导入{firebase}; 
 
 firebase.initializeApp（...）; 
  

可以工作，但看起来是等价的

  import * as firebase from'firebase'; 
 
 firebase.firebase.initializeApp（...）; 
  

不会检查。

I've been trying to get the Angular2 quickstart app to work with Firebase (see this repository). I've installed the latest version of Firebase, attempted to load firebase using SystemJS (see systemjs.config.js) and tried importing firebase and using the function initializeApp (see app.component.ts). However, I keep getting the error firebase.initializeApp is not a function in the browser console. Am I using SystemJS correctly to load firebase.js?

Note: To replicate the error, you should just be able to do npm install followed by npm start.

解决方案

One change: from

import * as firebase from 'firebase';

to

import {firebase} from 'firebase';

is enough to make your example work with firebase 3.6.

However, I'd say it's working by accident. firebase.js does not look like a module at all, it does not use module.exports or amd define, it just creates global variable firebase with the following properties:

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

Probably, it's the presence of __esModule that makes SystemJS to wrap it in another object - if you look in the debugger at the result of import * as firebase from 'firebase' it contains single property also named firebase which is the actual module that you need.

Interestingly, the firebase.d.ts is written in such a way that

import {firebase} from 'firebase'; 

firebase.initializeApp(...);

works, but seemingly equvalent

import * as firebase from 'firebase';

firebase.firebase.initializeApp(...);

does not typecheck.

这篇关于Angular 2和Firebase SDK的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！