L'accès firebase.stockage() avec AngularFire2 (Angular2 rc.Cinq)
J'essaie d'accéder à firebase.storage() sur mon projet, avec:
- "@angulaire": "2.0.0-rc.5"
- "angularfire2": "^2.0.0-bêta.3-pre2"
- "firebase": "^3.3.0"
j'ai trouvé cette solution , et j'ai créé mon .composant.ts fichier 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 le navigateur console:
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 que je rate. Comment puis-je accéder au stockage à l'aide de firebase? Je n'ai aucun problème à accéder à la base de données avec angularfire2.
Merci
2 réponses
à L'interne, AngularFire2 appelle initializeApp de Firebase dans une usine DI lors de la création de son FirebaseApp .
vous voyez l'erreur parce que vous accédez à l'instance globale firebase et initializeApp n'a pas encore été appelé - comme l'infrastructure DI n'a pas besoin de créer FirebaseApp ou l'une de ses dépendances.
plutôt que d'utiliser le global firebase , vous pourriez injecter FirebaseApp (qui est la valeur renvoyé 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 les fautes de frappe. Les versions récentes Les incluent maintenant, de sorte que 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);
}
}
version 4 " release candidate de AngularFire2, FirebaseApp n'est plus un jeton, de sorte que 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 requise parce que AngularFire2 importe maintenant seulement les parties de L'API Firebase qu'elle utilise. (Notez qu'il y a une proposition pour support de stockage .)
le code ci-dessus ne fonctionne plus, je n'arrête pas de recevoir 'firebase.le stockage n'est pas une fonction", essayez d'ajouter le code suivant:
import * as firebase from 'firebase/app';
import 'firebase/storage';