web-dev-qa-db-ja.com

AngularFire2（Angular2 rc.5）でfirebase.storage（）にアクセスする


プロジェクトで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: '<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);
  }
}

ブラウザコンソールに次のエラーが表示されます。

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

しかし、私はこのインポートでapp.module.tsのfirebaseを初期化しました

AngularFireModule.initializeApp(firebaseConfig)

不足しているものを取得していません。 firebaseを使用してストレージにアクセスするにはどうすればよいですか？ anglefire2でデータベースにアクセスしても問題ありません。
ありがとう

angularfirebasefirebase-storageangularfire2
20
Victor Locoman

内部的に、AngularFire2はinitializeAppを作成するときにDIファクトリーでFirebaseのFirebaseAppを呼び出します。

グローバルfirebaseインスタンスにアクセスしており、initializeAppがまだ呼び出されていないため、DIインフラストラクチャはFirebaseAppまたはそのいずれかを作成する必要がないため、エラーが表示されます。依存関係。

グローバルfirebaseを使用する代わりに、FirebaseApp（FirebaseのinitializeApp関数によって返される値）を挿入できます。

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

また、不要になったため、declare var firebase : any;を削除できます。

Firebase NPMモジュールの初期バージョンには、入力が含まれていませんでした。最近のバージョンにはそれらが含まれているため、firebaseAppプロパティは次のように強く入力できます。

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

AngularFire2の バージョン4リリース候補 に伴うリファクタリングにより、FirebaseAppはトークンではなくなったため、インジェクションを簡略化できます。

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

ただし、AngularFire2は使用するFirebase APIの部分のみをインポートするようになったため、firebase/storageの明示的なインポートが必要です。 （ ストレージサポート の提案があることに注意してください。）

57
cartant

上記のコードは機能しなくなりました。「firebase.storageは関数ではありません」と表示されるので、次のコードを追加してみてください。

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