title: stuck in systemjs / npm hell
body: <p>trying to get <a href="https://github.com/shlomiassaf/angular2-modal/blob/master/QUICKTHROUGH.md" rel="nofollow noreferrer">angular2-modal</a> to load, but running into configuration issues I think because their documentation is asking to load 2 modules from different locations. </p>
  
  <pre><code>import { ModalModule } from 'angular2-modal';
  import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';
  </code></pre>
  
  <p>folders look like this:</p>
  
  <pre><code>├───bundles
  ├───esm
  │   ├───components
  │   ├───framework
  │   ├───models
  │   ├───overlay
  │   └───providers
  └───plugins
      ├───bootstrap
      │   └───presets
      ├───js-native
      │   └───presets
      └───vex
          └───presets
  </code></pre>
  
  <p>it appears that ModalModule is in /bundles and Bootstrap.js is in /plugins/bootstrap/, but there is also angular2-modal.bootstrap.umd.js</p>
  
  <p>if i add this in systemjs.config </p>
  
  <pre><code>'angular2-modal': 'node_modules/angular2-modal/bundles',
  </code></pre>
  
  <p>or this</p>
  
  <pre><code>'angular2-modal': 'node_modules/angular2-modal',
  </code></pre>
  
  <p>having lots of 404 issues</p>
  
  <blockquote>
    <p><a href="http://localhost:3000/angular2-modal" rel="nofollow noreferrer">http://localhost:3000/angular2-modal</a> 404 (Not Found)</p>
  </blockquote>
  
  <p>I've tried lots of combinations, and I can get one of them to work like this: </p>
  
  <pre><code>  'angular2-modal': 'node_modules/angular2-modal/bundles/angular2-modal.umd.js',
  </code></pre>
  
  <p>but then, not sure how to explicitly specify it for the bootstrap module. </p>
  
  <p><strong>systemjs.config</strong></p>
  
  <pre><code>(function (global) {
    System.config({
      paths: {
        'npm:': 'node_modules/'
      },
      map: {
        app: 'app',
        '@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',
        'rxjs': 'npm:rxjs',
        'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
        'ag-grid-enterprise': 'node_modules/ag-grid-enterprise',
        'ag-grid-ng2': 'node_modules/ag-grid-ng2',
        'ag-grid': 'node_modules/ag-grid',
        'jquery': 'npm:jquery',
        'angular2-fontawesome': 'node_modules/angular2-fontawesome',
        'angular2-modal': 'node_modules/angular2-modal',
        // 'angular2-modal': 'node_modules/angular2-modal/bundles/angular2-modal.umd.js',
        // 'angular2-modal/plugins/bootstrap': 'node_modules/angular2-modal/plugins/bootstrap/bootstrap.js',
  
        'dateformat': 'node_modules/dateformat'
  
      },
      // packages tells the System loader how to load when no filename and/or no extension
      packages: {
        app: { main: './product.js', defaultExtension: 'js' },
        rxjs: { defaultExtension: 'js' },
        'angular2-in-memory-web-api': {        main: './index.js', defaultExtension: 'js'      },
        'ag-grid-ng2': { defaultExtension: "js" },
        'ag-grid': { defaultExtension: "js" },
        'ag-grid-enterprise': { defaultExtension: "js" },
        'jquery': {defaultExtension: "js"},
        'angular2-fontawesome': { defaultExtension: 'js' },
        'angular2-modal': { defaultExtension: 'js' },
        'angular2-modal/bootstrap': { defaultExtension: 'js' },
  
  
      }
    });
  })(this);
  </code></pre>