Firebase InitializeApp在Angular Typescript中

Question

我試圖初始化我的angular（typescript）應用程序以使用firebase。我有一個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); 
    }; 
} 

我打電話FirebaseService.Start當應用程序啓動，但目前我得到下面的錯誤在瀏覽器控制檯

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肯定存在似乎是一個被稱爲initializeApp功能，即

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

，所以我不能工作了，我要去哪裏錯了。有任何想法嗎？

我使用的角度V2.2.0和火力v3.6.1

Answer 1

我想知道同樣的事情：

我可以使用firebase上，無需使用angularfire2？

但無論如何，您可以使用angularfire2庫爲您的Angular項目。

https://github.com/angular/angularfire2

對於System.js，存在this doc更多信息。

編輯

另外，也可以使用無firebaseangularfire2，例如：

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

}