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

回答

相關問題