Angular4 doesn't load npm installed Firebase

I am attempting to use npm installed Firebase with my Angular4 app. I have npm installed the latest version of Firebase (version 4.1.1) and checked it has installed correctly. I have input the following code:

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

import { initializeApp, database } from 'firebase';


@Component({
  selector: 'dInstruct-app',
  styleUrls: [ './app.component.css' ],
  template: `
    <h1></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()));
  }
}

However, when I attempt to load the app with the above Firebase code in place, it fails with errors:

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

What problem is occuring here?

via Just In Time Berlake