Доступ firebase.storage() с AngularFire2 (Angular2 rc.5)

Question

Я пытаюсь получить доступ к firebase.storage() на мой проект, с:

• "@angular": «2.0.0- rc.5"
• "angularfire2": "^ 2.0.0-beta.3-pre2"
• "firebase": "^ 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(). 

но я инициализирован firebase в app.module.ts с этим импортом

AngularFireModule.initializeApp(firebaseConfig) 

Я не могу получить где я ошибаюсь, и как я могу получить доступ к хранилищу с использованием firebase. У меня нет проблем с доступом к базе данных с помощью angularfire2.
Благодаря

Answer 1

Внутренне AngularFire2 называет Firebase-х initializeApp в DI заводе при создании его FirebaseApp.

Вы видите ошибку, потому что вы получаете доступ к глобальному firebase экземпляру и initializeApp еще не были названы - как DI инфраструктура не требуется, чтобы создать FirebaseApp или любые из его зависимостей.

Вместо того чтобы использовать глобальный firebase, вы можете придать FirebaseApp (что значение, возвращаемое initializeApp функцией Firebase в):

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

---

Ранние версии модуля NPB Firebase не включают в себя типовые обозначения. Последние версии теперь включают их, поэтому 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); 
    } 
} 

---

С рефакторинга, сопровождавшей version 4 release candidate из AngularFire2, 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 импортирует только участки Firebase API, которые он использует. (Обратите внимание, что есть предложение для storage support.)

Answer 2

Приведенный выше код не работает, я получаю «firebase.storage не является функцией», попробуйте добавить следующий код:

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