Firebase InitializeApp in Angular Typoskript

Question

Ich versuche, meine eckige App (Typoskript) zu initialisieren, um Firebase zu verwenden. Ich habe eine FirebaseService Klasse, die eine Methode hat die App zu initialisieren, dh

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

ich FirebaseService.Start nennen, wenn die Anwendung gestartet wird, aber ich bin zur Zeit den folgenden Fehler in der Browser-Konsole bekommen

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) 

Meine SystemJS Config eingerichtet ist, als

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

folgt so sollte es firebase.js der Lage sein, von meinerzu ladenOrdner. Suchen Sie in firebase.js scheint es sicherlich eine Funktion zu sein initializeApp genannt, das heißt,

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

, so kann ich Sie nicht arbeiten, wo ich falsch gehe. Irgendwelche Ideen?

Ich verwende Winkel v2.2.0 und v3.6.1 Feuerbasis

Answer 1

ich die gleiche Sache gewundert:

Kann ich firebase direkt ohne angularfire2 zu verwenden?

Aber trotzdem können Sie angularfire2 Bibliothek für Ihre Angular Projekt verwenden.

https://github.com/angular/angularfire2

Für System.js gibt es weitere Informationen in this doc.

bearbeitet

Es ist auch möglich firebase ohne angularfire2, zum Beispiel zu verwenden:

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

}