localhost:3000/traceur SystemJS with AngularFire

Question

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:

Any hint what is going on?

Answer 1

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.

Answer 2

Thanks @artem — I was having the exact same problem!

You may also need to reference Firebase in your map too e.g.

'firebase': 'npm:firebase'

And add Firebase to your packages e.g.

  'angularfire2': {
    main: './bundles/angularFire2.umd.js',
    defaultExtension: 'js'
  },
  'firebase': {
    main: './firebase.js',
    defaultExtension: 'js'
  }

Otherwise you may see a new 404 error for Firebase.