title: Angular Firebase InitializeApp
body: <p>I've followed the angular <a href="https://angular.io/docs/ts/latest/quickstart.html" rel="nofollow noreferrer">quickstart guide</a> and have it running with no problems. I've then attempted to add firebase to my app as follows:</p>
  
  <ol>
  <li>Install firebase from the npm repository using <code>npm install --save firebase</code>. This installed firebase v3.6.1 to <code>node-modules</code>.</li>
  <li><p>Update SystemJS so the app can load the new firebase package, i.e., <code>systemjs.config.js</code> looks as follows:</p>
  
  <pre><code>(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);
  </code></pre></li>
  <li><p>Then I update <code>app.component.ts</code> as follows:</p>
  
  <pre><code>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: '&lt;h1&gt;Hello Angular!&lt;/h1&gt;'
  })
  
  export class AppComponent {
   constructor() {
      console.log("Starting firebase");
      firebase.initializeApp(firebaseConfig);
   }
  }
  </code></pre></li>
  </ol>
  
  <p>All other files remain the same as described in <a href="https://angular.io/docs/ts/latest/quickstart.html" rel="nofollow noreferrer">quickstart guide</a>.</p>
  
  <p>Now, when I try and run the app using <code>npm start</code>, I get the following error in the browser console:</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>Why is <code>initializeApp</code> not a function? (it appears to be there in <code>firebase.js</code>).</p>
  
  <h1>Note:</h1>
  
  <p>WebStorm TypeScript intellisense is also complaining in <code>app.component.ts</code> that the <code>initializeApp</code> function on <code>firebase.initializeApp</code> is an unresolved JavaScript function. I don't understand this as there is a definition for <code>initializeApp</code> in <code>firebase.d.ts</code> packaged with the npm firebase package, i.e., </p>
  
  <pre><code>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;
  }
  </code></pre>