Доступ к 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: '' }) 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.
благодаря

Внутри 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: '' }) 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 не включали типизацию. Последние версии теперь include их, поэтому свойство firebaseApp может быть строго типизировано следующим образом:

 import { Component, Inject } from '@angular/core'; import { FirebaseApp } from 'angularfire2'; import * as firebase from 'firebase'; @Component({ template: '' }) 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: '' }) 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, которые он использует. (Обратите внимание, что есть предложение по поддержке хранения .)

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

 import * as firebase from 'firebase/app'; import 'firebase/storage'; 
  • Использование разрешения в Angular2 Routes
  • Динамическая маршрутизация на основе внешних данных
  • Как заставить Angular2 связывать компонент в innerHTML
  • Как мы можем обнаружить, когда пользователь закрывает браузер?
  • Angularjs препятствуют отправке формы при неудачной проверке ввода
  • Изменение заголовка страницы с помощью нового маршрутизатора «Угловой 2»
  • Угловой фильтр 2 / список поиска
  • угловое2 наблюдаемое, получение неопределенного в компоненте
  • Как получить элемент dom в угловом 2
  • Как получить абсолютный путь к текущей странице в Angular 2?
  • Строки таблицы Angular2 как компонент
  • Давайте будем гением компьютера.