Firebase InitializeApp in Angular Typescript

Question

firebaseを使用するために角度（typescript）アプリを初期化しようとしています。私は、アプリケーションの起動時に、私はFirebaseService.Startを呼び出すアプリケーションを初期化する方法、すなわちを持っているFirebaseServiceクラス、

import {Injectable} from "@angular/core"; 
import * as firebase from 'firebase'; 

const firebaseConfig = { 
    apiKey: // my api key, 
    authDomain: // my auth domain, 
    databaseURL: // my database url, 
    storageBucket: // my storage bucket, 
}; 

@Injectable() 
export class FirebaseService { 

    start(): void { 
     console.log("Starting firebase"); 
     firebase.initializeApp(firebaseConfig); 
    }; 
} 

を持っていますが、私は現在、ブラウザのコンソールで次のエラーを取得しています

Starting firebase 
core.umd.js:2837 EXCEPTION: Error in :0:0 caused by: firebase.initializeApp is not a functionErrorHandler.handleError @ core.umd.js:2837 
core.umd.js:2839 ORIGINAL EXCEPTION: firebase.initializeApp is not a functionErrorHandler.handleError @ core.umd.js:2839 
core.umd.js:2842 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:2842 
core.umd.js:2843 TypeError: firebase.initializeApp is not a function 
    at FirebaseService.start (http://localhost:3000/app/services/firebase.service.js:24:18) 
    at new AppComponent (http://localhost:3000/app/app.component.js:16:25) 
    at new Wrapper_AppComponent (/AppModule/AppComponent/wrapper.ngfactory.js:7:18) 
    at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:20:28) 
    at CompiledTemplate.proxyViewClass.AppView.createHostView (http://localhost:3000/lib/@angular/core/bundles/core.umd.js:9147:25) 
    at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (http://localhost:3000/lib/@angular/core/bundles/core.umd.js:9407:56) 
    at ComponentFactory.create (http://localhost:3000/lib/@angular/core/bundles/core.umd.js:5481:29) 
    at ApplicationRef_.bootstrap (http://localhost:3000/lib/@angular/core/bundles/core.umd.js:6550:44) 
    at eval (http://localhost:3000/lib/@angular/core/bundles/core.umd.js:6459:93) 
    at Array.forEach (native) 

マイSystemJSの設定は

(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      "lib:": 'lib/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 

      // angular bundles 
      '@angular/core': 'lib:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'lib:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'lib:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'lib:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'lib:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'lib:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'lib:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'lib:@angular/forms/bundles/forms.umd.js', 
      'rxjs': 'lib:rxjs', 
      'firebase': 'lib:firebase' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      firebase: { 
       main: 'firebase.js', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

を以下のように設定されているので、私のからfirebase.jsをロードすることができるはずですフォルダ。 firebase.jsで見ると、確かに私は間違って行くよどこ

initializeApp:function(a,c){void 0===c?c="[DEFAULT]":"string"===typeof c&&""!.... 

はので、私はうまくいかないことができ、 initializeApp呼び出される関数、すなわちがあるように思われます。何か案は？

私は同じことを疑問に思い、角度バージョン2.2.0とfirebase v3.6.1

Answer 1

を使用しています：

私はangularfire2を使用せずに直接firebaseを使用することはできますか？

とにかくAngularプロジェクトにはangularfire2ライブラリを使用できます。

https://github.com/angular/angularfire2

はSystem.jsについて、this docでより多くの情報があります。

例えば、angularfire2なしfirebaseを使用することも可能である

編集：ちょうど角度クイックスタートの例で試してみました

import { Injectable } from '@angular/core'; 
import * as firebase from 'firebase'; 
import { environment } from '../../environments/environment'; 

@Injectable() 
export class MyService { 
    app: firebase.app.App; 
    db: firebase.database.Database; 
    list: any[] = []; 

    constructor() { 
    this.app = firebase.initializeApp(environment.firebase); 
    this.db = firebase.database(); 
    } 

    getList(path: string): void { 
    this.list = []; 

    this.db.ref(path) 
    .once('value').then(snapshot => { 
     snapshot.forEach(item => { 
     this.list.push(item.val());    
     }); 
    }); 
    } 

}