stuck in systemjs / npm hell

Question

trying to get angular2-modal to load, but running into configuration issues I think because their documentation is asking to load 2 modules from different locations.

import { ModalModule } from 'angular2-modal';
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';

folders look like this:

├───bundles
├───esm
│   ├───components
│   ├───framework
│   ├───models
│   ├───overlay
│   └───providers
└───plugins
    ├───bootstrap
    │   └───presets
    ├───js-native
    │   └───presets
    └───vex
        └───presets

it appears that ModalModule is in /bundles and Bootstrap.js is in /plugins/bootstrap/, but there is also angular2-modal.bootstrap.umd.js

if i add this in systemjs.config

'angular2-modal': 'node_modules/angular2-modal/bundles',

or this

'angular2-modal': 'node_modules/angular2-modal',

having lots of 404 issues

http://localhost:3000/angular2-modal 404 (Not Found)

I've tried lots of combinations, and I can get one of them to work like this:

  'angular2-modal': 'node_modules/angular2-modal/bundles/angular2-modal.umd.js',

but then, not sure how to explicitly specify it for the bootstrap module.

systemjs.config

(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);

Answer 1

I found a kind of solution. It works but VS code complains about reference being bad.

systemjs.config

  'angular2-modal': 'node_modules/angular2-modal/bundles/angular2-modal.umd.js',
  'angular2-modal-bootstrap': 'node_modules/angular2-modal/bundles/angular2-modal.bootstrap.umd.js',

modules.ts

import { ModalModule } from 'angular2-modal';
import { BootstrapModalModule } from 'angular2-modal-bootstrap'; // although this gives errors in VS compiler, the file is loaded in browser. 

if i don't specify the umd files directly i keep getting the 404. Above solution just shows as breaks in IDE on imports.

also the body portion of modal doesn't appear to support Angular expressions which would render it kind of useless accept for the simplest use cases.

ended up going with ng2-bs3-modal. was quick to setup and supports angular within the modal. https://github.com/dougludlow/ng2-bs3-modal

Answer 2

I also had same problem.. I just rolled back to "typescript": "^2.6.2" and it worked or me.