訪問與AngularFire2（Angular2 rc.5）

我嘗試在我的項目中訪問firebase.storage（），與firebase.storage（）：訪問與AngularFire2（Angular2 rc.5）

「@angular」：「2.0.0- rc.5"
「angularfire2」：「^ 2.0.0 beta.3-PRE2」
「火力點」：「^ 3.3.0」

我發現這個solution，並創建了.component.ts文件與：

import { Component } from '@angular/core'; 
declare var firebase : any; 

@Component({ 
    template: '<img [src]="image">' 
}) 
export class RecipesComponent { 
    image: string; 
    constructor() { 
    const storageRef = firebase.storage().ref().child('images/image.png'); 
    storageRef.getDownloadURL().then(url => this.image = url); 
    } 
}

，我得到這個錯誤（在瀏覽器控制檯）：

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./bstorageComponent class FBStorageComponent_Host - inline template:0:0 
ORIGINAL EXCEPTION: Error: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp(). 
ORIGINAL STACKTRACE: 
Error: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp().

但是，我初始化火力在app.module.ts這個進口

AngularFireModule.initializeApp(firebaseConfig)

我不能讓我錯了，我如何使用Firebase訪問存儲。使用angularfire2訪問數據庫沒有問題。
謝謝

來源

2016-08-21 Victor Locoman

在創建FirebaseApp時，在內部，AngularFire2在DI工廠中調用Firebase的initializeApp。

由於您正在訪問全局firebase實例並且尚未調用initializeApp，您將看到該錯誤 - 因爲DI基礎結構不需要創建FirebaseApp或其任何依賴關係。

比使用全球firebase相反，你可以注入FirebaseApp（這是由火力地堡的initializeApp函數的返回值）：

import { Component, Inject } from '@angular/core'; 
import { FirebaseApp } from 'angularfire2'; 

@Component({ 
    template: '<img [src]="image">' 
}) 
export class RecipesComponent { 
    image: string; 
    constructor(@Inject(FirebaseApp) firebaseApp: any) { 
    const storageRef = firebaseApp.storage().ref().child('images/image.png'); 
    storageRef.getDownloadURL().then(url => this.image = url); 
    } 
}

而且，因爲它不再需要，你可以刪除declare var firebase : any;。

早期版本的Firebase NPM模塊不包括類型。最新版本現在包括他們，所以firebaseApp物業可強類型如下：

import { Component, Inject } from '@angular/core'; 
import { FirebaseApp } from 'angularfire2'; 
import * as firebase from 'firebase'; 

@Component({ 
    template: '<img [src]="image">' 
}) 
export class RecipesComponent { 
    image: string; 
    constructor(@Inject(FirebaseApp) firebaseApp: firebase.app.App) { 
    const storageRef = firebaseApp.storage().ref().child('images/image.png'); 
    storageRef.getDownloadURL().then(url => this.image = url); 
    } 
}

隨着伴隨AngularFire2的version 4 release candidate重構，FirebaseApp不再是一個道理，所以注射可以簡化：

import { Component, Inject } from '@angular/core'; 
import { FirebaseApp } from 'angularfire2'; 
import 'firebase/storage'; 

@Component({ 
    template: '<img [src]="image">' 
}) 
export class RecipesComponent { 
    image: string; 
    constructor(firebaseApp: FirebaseApp) { 
    const storageRef = firebaseApp.storage().ref().child('images/image.png'); 
    storageRef.getDownloadURL().then(url => this.image = url); 
    } 
}

然而，需要的firebase/storage明確的進口，因爲AngularFire2現在進口它所使用的火力地堡API的唯一部分。（請注意，是storage support的建議。）

來源

2016-08-21 23:46:53 cartant

爲什麼我有一種感覺，這是下載到Firebase SDK的最佳方式？哦，是的，因爲它！非常感謝你，無論我轉身，每個人都說'聲明var firebase：任何;'但是這不起作用。再次感謝你。 – Rexford

這是黃金。 Thxs – calbear47

這段代碼並不適用於我，因爲它是。我不得不向組件添加一個變量'fb：firebase.app.App;'，並在構造函數中爲其分配了注入的'FirebaseApp'。 '構造函數（@Inject（FirebaseApp）firebaseApp：firebase.app.App）{ this.fb = firebaseApp; }' 當然，那麼無論何時我需要使用它：'this.fb ....' –

上面的代碼不再工作，我不斷收到「firebase.storage不是一個函數」，嘗試添加以下代碼：

import * as firebase from 'firebase/app'; 
import 'firebase/storage';

來源

2017-06-07 17:17:12

謝謝！是的，它的工作原理！ – Eusthace

謝謝！有用。 – GokulaKrishnanM

訪問與AngularFire2（Angular2 rc.5）

回答

相關問題