Доступ к 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); } } и я получаю следующую ошибку в консоли браузера:
- Что альтернатива угловым.копиям в угловом
- Как связать raw html в Angular2
- Динамическое имя classа внутри ngClass в угловом 2
- Может ли ng-контент использоваться внутри ngFor?
- Angular2 - как вызвать функцию компонента извне приложения
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.
благодаря
- CORS и API API Google Maps
- Как передать данные на угловые маршрутизаторы?
- угловое обнаружение изменений и ChangeDetectionStrategy.OnPush
- Создайте новый экземпляр classа с зависимостями, не понимая поставщика фабрики
- Ошибка Angularfire 2: указанный поставщик аутентификации не включен для этой Firebase
- Угловой 4 - «Нельзя привязываться к« ngModel », так как это не известное свойство ошибки« input »
- Как глобально установить параметр preserveWhitespaces в Angular на false?
- Как определить изменение маршрута в Угловом?
Внутри 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';