卡在 systemjs / npm 地狱

Question

试图让angular2-modal 加载，但我认为遇到了配置问题，因为他们的文档要求从不同位置加载 2 个模块。

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

文件夹如下所示：

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

ModalModule 似乎在 /bundles 中，而 Bootstrap.js 在 /plugins/bootstrap/ 中，但也有 angular2-modal.bootstrap.umd.js

如果我在 systemjs.config 中添加这个

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

或者这个

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

有很多 404 问题

http://localhost:3000/angular2-modal404（未找到）

我尝试了很多组合，我可以让其中一个像这样工作：

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

但是，不确定如何为引导模块显式指定它。

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

我找到了一种的解决方案。它可以工作，但 VS 代码抱怨引用不好。

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. 

如果我不直接指定 umd 文件，我会一直收到 404。上面的解决方案只是在 IDE 中显示为导入中断。

modal 的主体部分似乎也不支持 Angular 表达式，这对于最简单的用例来说会导致它变得毫无用处。

最终选择了 ng2-bs3-modal。快速设置并支持模态中的角度。 https://github.com/dougludlow/ng2-bs3-modal

Answer 2

我也遇到了同样的问题。我只是回滚到 "typescript": "^2.6.2" 并且它对我有用。