Lack of extension when loading Firebase using systemJS

Question

I'm writing an Angular2 app which uses Firebase through AngularFire2 and I've run into trouble loading Firebase files. SystemJS bootstraps the app, loads firebase.js, but afterwards fails to load the files required in it, due to the lack of the extension. In particular, it sends a request to http://localhost:8080/node_modules/firebase/app instead of http://localhost:8080/node_modules/firebase/app.js. The latter exists in the bundle and is therefore definitely the right thing to load.

Here is my system.config.js:

(function(global) {

// map tells the System loader where to look for things
var map = {
    'aviary':                               'js',
    'rxjs':                                 'npm:rxjs',
    'firebase':                             'npm:firebase/firebase.js',
    'firebase/app':                         'npm:firebase/app.js',
    'angularfire2':                         'npm:angularfire2',
    '@angular':                             'npm:@angular'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'aviary':                       { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                         { defaultExtension: 'js' },
    'angular2-in-memory-web-api':   { main: 'index.js', defaultExtension: 'js' },
    'angularfire2':                 { main: 'bundles/angularFire2.umd.js', defaultExtension: 'js'},

};
var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
];

// Individual files (~300 requests):
function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}

// Bundled (~40 requests):
function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}

// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
    map: map,
    packages: packages,
    paths: {
        'npm:': 'node_modules/'
    }
};

System.defaultExtension = true;
System.config(config);

})(this);

One of the things I tried was

var packages = {
    //...
    'firebase':                     { defaultExtension: 'js' }
};

but that did not help. It feels like it's a configuration issue, but I'm struggling to figure out how to make it do what I need.

Answer 1

In your system.config.js, package config for firebase does not apply because you mapped firebase to a file, and package config basically works only for directories. Mapping to files works only when the module really is just one file. When it needs to load other files from the same directory, you have to map the module to the directory and use main in package config, like this:

var map = {
    ...
    'firebase': 'npm:firebase',
}

and

var packages = {
     ...
    'firebase':  { main: 'firebase-browser.js' }
}

Notes:

1. it looks like you don't need separate mapping for firebase/app

2. with the latest version, the main file for firebase is firebase-browser.js, not just firebase.js

3. You don't need defaultExtension: 'js' in package config because js is already the default for any package.

4. I'm not sure what this line does, nothing changed when I removed it:

   System.defaultExtension = true;