Firebase InitializeApp в Angular Typescript

Я пытаюсь инициализировать свое приложение 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 из моей папки lib. Глядя в firebase.js, определенно появляется функция с именем initializeApp, т.е.

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

поэтому я не могу понять, где я ошибаюсь. Любые идеи?

Я использую angular v2.2.0 и firebase v3.6.1.


firebase angular systemjs
person James B    schedule 18.11.2016    source источник
comment
Только что попробовал пример быстрого запуска angular (angular.io/docs/ts/latest/quickstart. html). И получаю ту же ошибку. Что происходит???   -  person James B    schedule 18.11.2016

Ответы (1)


arrow_upward
2
arrow_downward

Я задавался тем же вопросом:

Могу ли я использовать firebase напрямую, не используя angularfire2?

Но в любом случае вы можете использовать библиотеку angularfire2 для своего проекта Angular.

https://github.com/angular/angularfire2

Для System.js есть дополнительная информация в этот документ.

Изменить

Также можно использовать firebase без angularfire2, например:

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

}
person bob    schedule 01.09.2017