21


プロジェクトで 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 を使用してストレージにアクセスするにはどうすればよいですか? angularfire2でデータベースにアクセスしても問題ありません。
ありがとう

4

2 に答える 2

57

内部的に、AngularFire2 は、initializeAppそのFirebaseApp.

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

global を使用する代わりに、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);
  }
}

ただし、firebase/storageAngularFire2 は使用する Firebase API の部分のみをインポートするようになったため、 の明示的なインポートが必要です。（なお、保管対応の提案があります。）

于 2016-08-21T23:46:53.900 に答える