Search code examples
systemjsangularfire2

localhost:3000/traceur SystemJS with AngularFire

I picked the getting started with Angular2 tutorial format and only added in the angularfire2 part.

I installed firebase and angularfire2 using the steps on the angularfire2 docs page

Below is my systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(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',
      // other libraries
      'rxjs':                       'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
      'angularfire2':               'npm:angularfire2'
    },
    // 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'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      },
      angularfire2: {
        main: 'index.js',
        defautExtension: 'js'
      }
    }
  });
})(this);

Then I am simply importing it like so:

import { AngularFireModule } from 'angularfire2';

Then I keep getting this error:

enter image description here

Any hint what is going on?

Solution

  • Your config maps angularfire2 to node_modules/angularfire2/index.js, which is written is es6, so SystemJS tries to compile it using traceur, and can not find it.

    The easy fix would be to configure it so it loads the bundle in angular2/bundles/angularFire2.umd.js, not index.js.

    So angularfire2 in packages 

      angularfire2: {
    main: 'index.js'

    needs to be changed to

      angularfire2: {
    main: 'bundles/angularFire2.umd.js'

    Also, angularFire depends on Firebase, so, as @Jonathon Oates said in his answer, you need to provide configuration for Firebase too.