AngularFire2 (Angular2의 rc.5)

Question

내가 함께, 내 프로젝트에 firebase.storage()를 액세스하려고에 firebase.storage() 액세스 :

• "@angular": "2.0.0-를 rc.5 "
• "angularfire2 ""^ 2.0.0-beta.3-PRE2 "
• "중포 기지는 ":"^ 3.3.0 "

나는이 solution을 발견하고, 내 생성 .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); 
    } 
} 

나는 (브라우저 콘솔에서)이 오류를 얻을 :이 수입

AngularFireModule.initializeApp(firebaseConfig) 

와 app.module.ts에서 중포 기지를 초기화,

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

을하지만 난 얻을 수 없다 내가 잘못하고 어떻게 firebase를 사용하여 스토리지에 액세스 할 수 있습니까? 나는 angularfire2와 데이터베이스에 액세스하는 데 아무런 문제가 없습니다.
감사합니다.

Answer 1

내부적으로 AngularFire2는 FirebaseApp을 만들 때 DI 공장에서 Firebase의 initializeApp을 호출합니다.

firebase 인스턴스에 액세스하고 initializeApp이 아직 호출되지 않았기 때문에 오류가 표시됩니다. DI 인프라는 FirebaseApp이나 그 종속성을 만들 필요가 없기 때문에 오류가 표시됩니다. 그것은 더 이상 필요 것, 당신이 declare var firebase : any;을 삭제할 수

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

그리고 :

오히려 글로벌 firebase를 사용하는 것보다, 당신은 (중포 기지의 initializeApp 함수에 의해 반환되는 값이다) FirebaseApp를 주입 할 수있다.

---

초기 버전의 Firebase NPM 모듈에는 타이핑이 포함되지 않았습니다.

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의 version 4 release candidate를 함께 리팩토링으로

---

, FirebaseApp가 더 이상 토큰, 그래서 주사를 단순화 할 수 다음 firebaseApp 속성이 강력하게 다음과 같이 입력되지 수 있도록 최신 버전의 지금, 그들을 포함 : AngularFire2 지금 사용하는 중포 기지 API의 부분 만 수입하기 때문에

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/storage의 명시적인 수입이 필요합니다. (storage support에 대한 제안이 있음을 유의하십시오.)

가

Answer 2

위의 코드가 더 이상 내가 다음 코드를 추가하려고 'firebase.storage는 함수가 아닙니다'가 계속 작품 :

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