Angular4はインストールされているFirebaseをnpmにロードしません

Question

Angular4アプリでnpmインストールされたFirebaseを使用しようとしています。私はnpmにFirebaseの最新バージョン（バージョン4.1.1）をインストールし、それが正しくインストールされていることを確認しました。私が代わりに上記Firebaseコードでアプリをロードしようとしたとき

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

しかし、それはエラーで失敗します：

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

は、角グリッターにチェックした後、問題ではなく、角-CLIよりも、アプリを作成するために、角度のクイックスタートを使用している、と思わ

import * as firebase from 'firebase'; 

Answer 2

を試してみてください。私はcliに新しいアプリケーションを作成しました。そして、今度はnpmバージョンのFirebaseでエラーなく正常に動作しています。

ちょうどヘッドアップですが、小規模のものであっても、すべてのプロダクションアプリに対してAngular Quickstartを使用することには注意が必要です。

それはとにかく解決策でした。さて、すべてのカスタムコードを古いアプリから新しいものに移植するだけです...

また、以下の解決方法は、移動できない、または移動したくない場合にも利用できますa cli generated app：

firebaseを見つける場所をSystemJSに伝える必要があります。例えば。 SystemJSコンフィグのマッププロパティにエントリ を追加します。