web-dev-qa-db-fra.com

Accès à firebase.storage () avec AngularFire2 (Angular2 rc.5)


J'essaie d'accéder à firebase.storage () sur mon projet, avec:

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

J'ai trouvé ceci solution , et créé mon fichier .component.ts avec:

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

et j'obtiens l'erreur suivante dans la console du navigateur:

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

mais j'ai initialisé firebase dans app.module.ts avec cette importation

AngularFireModule.initializeApp(firebaseConfig)

Je n'obtiens pas ce qui me manque. Comment puis-je accéder au stockage à l'aide de Firebase? Je n'ai aucun problème avec l'accès à la base de données avec angularfire2.
Merci

angularfirebasefirebase-storageangularfire2
20
Victor Locoman

En interne, AngularFire2 appelle initializeApp de Firebase dans une fabrique DI lors de la création de son FirebaseApp.

Vous voyez l'erreur car vous accédez à l'instance globale firebase et initializeApp n'a pas encore été appelée - car l'infrastructure DI n'a pas eu besoin de créer FirebaseApp ou l'une de ses dépendances.

Plutôt que d'utiliser la fonction globale firebase, vous pouvez injecter FirebaseApp (qui est la valeur renvoyée par la fonction 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);
  }
}

Et, comme il n'est plus nécessaire, vous pouvez supprimer declare var firebase : any;.

Les premières versions du module NPM Firebase n'incluaient pas de typages. Les versions récentes les incluent maintenant, donc la propriété firebaseApp pourrait être fortement typée comme ceci:

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

Avec le refactoring qui accompagnait la version 4 candidate candidate d'AngularFire2, FirebaseApp n'est plus un token, donc l'injection peut être simplifiée:

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

Cependant, une importation explicite de firebase/storage est requis car AngularFire2 importe désormais uniquement les parties de l'API Firebase qu'il utilise. (Notez qu'il existe une proposition pour support de stockage .)

57
cartant

Le code ci-dessus ne fonctionne plus, je continue à obtenir "firebase.storage n'est pas une fonction", essayez d'ajouter le code suivant:

import * as firebase from 'firebase/app';
import 'firebase/storage';
11
William Wu