注意：

Question

我已经跟随角度quickstart guide并让它运行没有任何问题。然后，我尝试将firebase添加到我的应用程序，如下所示：

使用npm install --save firebase从npm存储库安装firebase。这将firebase v3.6.1安装到node-modules。

更新SystemJS，以便app可以加载新的firebase软件包，即systemjs.config.js如下所示：

(function (global) {
    System.config({
paths: {
    // paths serve as alias
    'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
    // our app is within the app folder
    app: 'app',
    // angular bundles
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
    // other libraries
    'rxjs':                      'npm:rxjs',
    'firebase': 'npm:firebase/firebase.js',
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// 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: {
        defaultExtension: 'js'
    }
}
 });
 })(this);

然后我更新app.component.ts，如下所示：

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

const firebaseConfig = {
 apiKey: "xxxxxxxxxx",
 authDomain: "xxxxxxxxxxx",
 databaseURL: "xxxxxxxxxxx",
 storageBucket: "xxxxxxxxx",
};

@Component({
  selector: 'my-app',
  template: '<h1>Hello Angular!</h1>'
})

export class AppComponent {
 constructor() {
    console.log("Starting firebase");
    firebase.initializeApp(firebaseConfig);
 }
}

所有其他文件保持与quickstart guide中描述的相同。

现在，当我尝试使用npm 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 new AppComponent (http://localhost:3000/app/app.component.js:22:18)
    at new Wrapper_AppComponent (/AppModule/AppComponent/wrapper.ngfactory.js:7:18)
    at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:15:28)
    at CompiledTemplate.proxyViewClass.AppView.createHostView (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9147:25)
    at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9407:56)
    at ComponentFactory.create (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:5481:29)
    at ApplicationRef_.bootstrap (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6550:44)
    at eval (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6459:93)
    at Array.forEach (native)
    at PlatformRef_._moduleDoBootstrap (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:6459:46)

为什么initializeApp不是函数？（它似乎出现在firebase.js）。

注意：

WebStorm TypeScript intellisense也在app.component.ts抱怨initializeApp上的firebase.initializeApp函数是一个未解析的JavaScript函数。我不明白这一点，因为initializeApp中有firebase.d.ts的定义与npm firebase包打包在一起，即

declare namespace firebase {
  interface FirebaseError {
    code: string;
    message: string;
    name: string;
    stack: string;
  }

  ...

  function initializeApp(options: Object, name?: string): firebase.app.App;

  function messaging(app?: firebase.app.App): firebase.messaging.Messaging;

  function storage(app?: firebase.app.App): firebase.storage.Storage;
}

Answer 1

尝试从app.module或您要使用Firebase的任何模块调用firebase.initializeApp（）。

import matplotlib.pyplot as plt

plt.plot(graph.index, savgol_filter(graph.values, 7, 3))

Answer 2

首先，您需要使用 @angular/fire 更改库。请使用firebase的官方库。请参阅官方图书馆的 this 链接。

然后在app.module.ts文件之后，你需要通过这个模块导入AngularFireModule和initializeApp，

app.module.ts 文件

import { AngularFireModule } from '@angular/fire';
import { environment } from 'src/environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后将您的 firebase 配置放入用于开发目的的 environment.ts 和用于生产目的的 environment.prod.ts 文件

environment.ts 和 environment.prod.ts 文件

export const environment = {
  production: false,
  firebaseConfig : {
    apiKey: "XXXXX",
    authDomain: "XXXX",
    databaseURL: "XXXX",
    projectId: "XXXXX",
    storageBucket: "XXX",
    messagingSenderId: "XXXX",
    appId: "XXXX",
    measurementId: "XXXXX",
  }
};

有关详细信息，请参阅this 链接。有关此库文档，请参阅this 链接。

Angular Firebase InitializeApp

注意：

2 个答案: