Question

我试图在我的Angular4应用程序中使用npm安装的Firebase。我有npm安装了最新版本的Firebase（版本4.1.1）并检查它是否已正确安装。我输入了以下代码：

import { Component, OnInit } from '@angular/core';

import { initializeApp, database } from 'firebase';


@Component({
  selector: 'dInstruct-app',
  styleUrls: [ './app.component.css' ],
  template: `
    <h1>{{title}}</h1>
    <nav>
      <a routerLink="/dashboard">Dashboard</a>
      <a routerLink="/calendar">Calendar</a>
      <a routerLink="/customers">Customers</a>
      <a routerLink="/accounts">Accounts</a>
    </nav>
    <router-outlet></router-outlet>`
})
export class AppComponent implements OnInit{
  title = 'dInstruct';

  config = {
    apiKey: ...
    authDomain: ...
    databaseURL: ...
    projectId: ...
    storageBucket: ...
    messagingSenderId: ...
  };

  ngOnInit(): void {
    initializeApp(this.config);
    database().ref().on('value', (snapshot: any) => console.log(snapshot.val()));
  }
}

但是，当我尝试使用上述Firebase代码加载应用时，它会失败并显示错误：

Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:28 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/firebase
    Error: XHR error (404 Not Found) loading http://localhost:3000/firebase
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1055:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/firebase as "firebase" from http://localhost:3000/app/app.component.js
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1055:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/firebase as "firebase" from http://localhost:3000/app/app.component.js
(anonymous) @ localhost/:28

这里发生了什么问题？

Answer 1

尝试

import * as firebase from 'firebase';

Answer 2

看来，在检查Angular Glitter之后，问题在于使用Angular Quickstart来创建应用程序，而不是angular-cli。我在cli中创建了一个新的应用程序，它现在可以正常使用npm版本的Firebase，没有错误。

只是单挑，但我建议对任何生产应用程序使用Angular Quickstart都要小心，即使是小规模的应用程序。

无论如何，那是解决方案。现在，我所要做的就是将旧应用程序中的所有自定义代码移植到新应用程序中......

或者，如果您不能或不想转移到cli生成的应用程序，也可以使用以下解决方案：

您需要告诉SystemJS在哪里找到firebase。例如。添加条目到SystemJS配置的map属性。

Angular4不加载npm安装的Firebase

2 个答案: