Angular4 不加载 npm 安装的 Firebase答案

【问题标题】：Angular4 doesn't load npm installed FirebaseAngular4 不加载 npm 安装的 Firebase
【发布时间】：2017-11-03 12:37:52
【问题描述】：

我正在尝试将 npm 安装的 Firebase 与我的 Angular4 应用程序一起使用。我已经 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

这里发生了什么问题？

【问题讨论】：

标签： node.js angular firebase npm http-status-code-404

【解决方案1】：

试试

import * as firebase from 'firebase';

【讨论】：

我会试一试...嗯，同样的错误。不过，感谢您试一试。

【解决方案2】：

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

只是提醒一下，但我建议不要将 Angular 快速入门用于任何生产应用程序，即使是小型应用程序。

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

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

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

【讨论】：