Доступ к firebase.storage() с помощью AngularFire2 (Angular2 rc.5)


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

  • "@ angular": "2.0.0-rc.5"
  • "angularfire2": "^ 2.0.0-beta.3-pre2"
  • "firebase": "^ 3.3.0"

Я нашел это решение и создал файл .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.
Благодаря

Ответы

Ответ 1

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

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

Вместо использования глобального firebase вы можете ввести FirebaseApp (это значение, возвращаемое функцией Firebase 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);
  }
}

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

Ответ 2

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

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