instalar - firebase storage angular 6

Accediendo a firebase.storage() con AngularFire2(Angular2 rc.5)

Question

Estoy intentando acceder a firebase.storage () en mi proyecto, con:

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

Encontré esta solution y creé mi archivo .component.ts con:

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);
}
}

y me sale el siguiente error en la consola del navegador:

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().

pero, inicialicé firebase en app.module.ts con esta importación

AngularFireModule.initializeApp(firebaseConfig)

No estoy recibiendo lo que me falta. ¿Cómo puedo acceder al almacenamiento utilizando Firebase? No tengo problemas para acceder a la base de datos con angularfire2.
Gracias

Answer 1

El código anterior ya no funciona, sigo recibiendo ''firebase.storage no es una función'', intente agregar el siguiente código:

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

Answer 2

Internamente, AngularFire2 llama a initializeApp de Firebase en una fábrica de DI cuando crea su FirebaseApp .

Está viendo el error porque está accediendo a la instancia global de firebase y aún no se ha llamado initializeApp , ya que la infraestructura DI no ha sido necesaria para crear FirebaseApp o cualquiera de sus dependencias.

En lugar de utilizar la base de firebase global, puede inyectar FirebaseApp (que es el valor devuelto por la función initializeApp de 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);
}
}

Y, como ya no es necesario, puede eliminar declare var firebase : any; .

Las primeras versiones del módulo Firebase NPM no incluían tipificaciones. Las versiones recientes ahora los incluyen, por lo que la propiedad firebaseApp podría escribirse de esta manera:

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);
}
}

Con la refactorización que acompaña a la versión 4 candidata a lanzamiento de AngularFire2, FirebaseApp ya no es un token, por lo que la inyección se puede simplificar:

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);
}
}

Sin embargo, se requiere una importación explícita de firebase/storage porque AngularFire2 ahora solo importa las partes de la API de Firebase que usa. (Tenga en cuenta que hay una propuesta de soporte de almacenamiento ).