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在/ bundle中，而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-modal 404（未找到）

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

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

但是，不知道如何为bootstrap模块显式指定它。

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

FileExists

modules.ts

FileDoesNotExist

如果我没有直接指定umd文件，我会继续获取404.上面的解决方案只是在IDE上显示为导入时的中断。

同样，模态的主体部分似乎不支持Angular表达式，这会使它对最简单的用例呈现出无用的接受。

结束了ng2-bs3-modal。快速设置并支持模态内的角度。 https://github.com/dougludlow/ng2-bs3-modal

Answer 2

我也遇到了同样的问题..我刚刚回到“打字稿”：“^ 2.6.2”，它还是有用的。

困在systemjs / npm hell

2 个答案: