angular2 modal & system.js

Question

system.js does not load the base angular2-modal javascript file and i have no clue why. This is my configuration:

(function(global) {
  var paths = {
    'npm:': '../node_modules/'
  };
  // map tells the System loader where to look for things
  var map = {
    'app':                                'js',
    '@angular/core':                      'npm:@angular/core',
    '@angular/common':                    'npm:@angular/common',
    '@angular/compiler':                  'npm:@angular/compiler',
    '@angular/http':                      'npm:@angular/http',
    '@angular/platform-browser':          'npm:@angular/platform-browser',
    '@angular/platform-browser-dynamic':  'npm:@angular/platform-browser-dynamic',
    '@angular/router':                    'npm:@angular/router',
    '@angular/upgrade':                   'npm:@angular/upgrade',
    'rxjs':                               'npm:rxjs',
    'moment':                             'npm:moment',
    'angular2-moment':                    'npm:angular2-moment',
    'angular2-modal':                     'npm:angular2-modal/bundles',
    'angular2-modal-bootstrap':           'npm:angular2-modal/bundles'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                                { main: 'main',  defaultExtension: 'js' },
    'rxjs':                               { defaultExtension: 'js' },
    'moment':                             { main: './moment', defaultExtension: 'js' },
    'angular2-moment':                    { main: './index', defaultExtension: 'js' },
    'angular2-modal':                     { main: './angular2-modal.umd', defaultExtension: 'js' },
    'angular2-modal-bootstrap':           { main: './angular2-modal.bootstrap.umd', defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/'+pkgName+'.umd.js', defaultExtension: 'js' };
  });
  var config = {
    paths,
    map,
    packages
  }
  System.config(config);
}(this));

The 'angular2-modal.bootstrap.umd.js' is loaded (i see it in the network tab) but the 'angular2-modal.umd.js' is not. The strange thing is, if i remove the 'angular2-modal-bootstrap' entry from the system.js file, the base 'angular2-modal.umd.js' is loaded just fine. Do I do anything wrong here?

Answer 1

This should work:

var map =  {
  'angular2-modal': 'npm:angular2-modal',
  'angular2-modal/plugins/bootstrap': 'npm:angular2-modal/bundles',
}

var packages = {
  'angular2-modal': { 
     main: 'bundles/angular2-modal.umd',
     defaultExtension: 'js'
  },

  "angular2-modal/plugins/bootstrap": {
     main: 'angular2-modal.bootstrap.umd',
     defaultExtension: 'js'
  }

}

Why does this work?

NodeJS will resolve non-local packages similar to how TypeScript resolves packages. Bascially, NodeJS will search for a package whose location is angular2-modal/plugins/bootstrap by searching up the directory chain until it finds either package.json (if it specifies a main property) or index.js. In this case, it will resolve the package under node_modules because under node_modules/angular2-modal/plugins/bootstrap, there is a package.json with a main property pointing to index.js.

For more information about the package resolution algorithm see here: https://www.typescriptlang.org/docs/handbook/module-resolution.html#how-nodejs-resolves-modules

and here:

https://nodejs.org/api/modules.html#modules_loading_from_node_modules_folders