Angularfire: Help Needed : Importing angularfire2/database and angularfire2/auth

[jofftiquez]

Version info

Angular: 4.1.2

Firebase: 4.0.0

AngularFire: 4.0.0-rc.0

Other (e.g. Ionic/Cordova, Node, browser, operating system):

How to reproduce these conditions

Failing test unit, Plunkr, or JSFiddle demonstrating the problem None sorry

Steps to set up and reproduce

1. I followed the installation guide from angular/angularfire2
2. I imported angulafire2 in systemjs.config.js as :

map:{
    'angularfire2': 'npm:angularfire2',
},
packages:{
    'angularfire2':{
        main: './bundles/angularfire2.umd.js',
        defaultExtension: 'js'
     }
}

1. In my app.module.ts

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { environment } from '../environments/environments.js';

Debug output

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur
Error: XHR error (404 Not Found) loading http://localhost:3000/traceur
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/traceur
Unable to load transpiler to transpile http://localhost:3000/node_modules/angularfire2/database.js
Error loading http://localhost:3000/node_modules/angularfire2/database.js as "angularfire2/database" from http://localhost:3000/app/app.module.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/traceur
Unable to load transpiler to transpile http://localhost:3000/node_modules/angularfire2/database.js
Error loading http://localhost:3000/node_modules/angularfire2/database.js as "angularfire2/database" from http://localhost:3000/app/app.module.js

[maitham]

did you figure this out?

[jofftiquez]

@maitham1 No not yet. But I started a new boilerplate using webpack.

[schmitzt3]

Here is a plunker that reproduces the issue.

http://plnkr.co/edit/SIHmTUBrbfzOOofVN59V?p=preview

I was able to get rid of the traceur errors after setting the transpiler to be typescript and including typescript in the map of my systemjs config, but that's not what we want. I think we want the browser to handling transpiling, but here's an example anyways:

System.config({
    transpiler: 'typescript',
    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
        ...
        'firebase': 'npm:firebase',
        'angularfire2': 'npm:angularfire2',
        'typescript': 'npm:typescript/lib/typescript.js'
        ...
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        'firebase': { defaultExtension: 'js', main: './firebase.js' },
        'angularfire2': { main: 'angularfire2.js', defaultExtension: 'js' }
    }
});

This never spit out the angular debug messages about enabling prod mode so I guess the app isn't really running.

UPDATE using version 4.3.1

System.config({
    transpiler: 'typescript',
    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
        ...
        'angularfire2': 'npm:angularfire2/bundles/core.umd.js',
        'angularfire2/database': 'npm:angularfire2/bundles/database.umd.js',
        'angularfire2/auth': 'npm:angularfire2/bundles/auth.umd.js',
        ...
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        ...
    }
});

[jofftiquez]

@schmitzt3 Thanks for adding an alternative solution, this might help others.

[andreev-artem]

Actually bundles look broken atm: bundles/angularfire2.umd.js doesn't contain anything related to database or auth. So looks like the only way to use angularfire2 for now (if you want to use official distrib) is to use any bundler with es6 modules generated from typescript modules.

[jofftiquez]

@andreev-artem Thanks for the info

[jofftiquez]

For future readers : I'll keep this open in case some one figured out a solution. As for me, I switched to angular cli.

[davideast]

Should be fixed now! Let me if you're still running into any problems.

[jofftiquez]

Thanks @davideast :)

[Ravslee]

I am getting the same error, please help @davideast

[yorbenyspr]

Here an system.js config file that might help, it works for me:
/**

• System configuration for Angular 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',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
        'firebase': 'npm:firebase',
        'firebase/app': 'npm:firebase/app',
        'firebase/auth': 'npm:firebase/auth',
        '@firebase/app': 'npm:@firebase/app/dist/cjs',
        '@firebase/auth': 'npm:@firebase/auth/dist',
        '@firebase/polyfill': 'npm:@firebase/polyfill/dist/cjs',
        '@firebase/util': 'npm:@firebase/util/dist/cjs',
        'promise-polyfill':'npm:promise-polyfill',
        // Firebase libraries
        'angularfire2': 'npm:angularfire2/bundles/core.umd.js',
        'angularfire2/database': 'npm:angularfire2/bundles/database.umd.js',
        'angularfire2/auth': 'npm:angularfire2/bundles/auth.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', main: './firebase.js' },
        'firebase/app': { defaultExtension: 'js', main: './index.js' },
        'firebase/auth': { defaultExtension: 'js', main: './index.js' },
        '@firebase/app': { defaultExtension: 'js', main: './index.js' },
        '@firebase/auth': { defaultExtension: 'js', main: './auth.js' },
        '@firebase/polyfill': { defaultExtension: 'js', main: './index.js' },
        '@firebase/util': { defaultExtension: 'js', main: './index.js' },
        'promise-polyfill': { defaultExtension: 'js', main: './promise.js' }
    }
});

})(this);

[AnthonyNahas]

I was recently facing the same problem...
To solve the issue, I adapted my SystemJS configuration for my ngx-auth-firebaseui package. I posted the configuration here