困于系统/ npm地狱

Question

试图让安古拉2-模态加载，但遇到了配置问题，因为它们的文档要求从不同的位置加载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/ but /中，但也有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-modal 404 (未找到)

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

  '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中导入的中断。

此外，模态的主体部分似乎不支持角表达式，这会使它对于最简单的用例来说有点毫无用处。

以NG2-BS3模式结束。快速安装并支持模态内的角度。https://github.com/dougludlow/ng2-bs3-modal

Answer 2

我也有同样的问题..。我刚回过头来看“打字本”："^2.6.2“，它成功了，或者我自己。