如何正确设置我的 systemjs.config 以与 ng2-codemirror 一起使用？

Question

我正在尝试导入 the codemirror ng2 module 以在我正在编写的 angular 2 应用程序中使用，但遇到了一些设置问题。在执行此操作时，我试图跟随我的 ng2-datetime-picker 导入，它确实有效。这是我的 system.js.config

(function (global) {
  System.config({
    path: {
      'npm:' : 'node_modules/'
    },
    map: {
        app: 'app',
        // .....
        // a bunch of angular libraries
        // ......
        'ng2-datetime-picker': 'npm:ng2-datetime-picker/dist',   // this works
        'ng2-codemirror: 'npm:ng2-codemirror/lib'      // this does not work
    },
    packages: {
        app: {
            main: './main.js',
            default: 'js'
        },
        'ng2-datetime-picker': {
            main: 'ng2-datetime-picker.umd.js',         // this works
            defaultExtension: 'js'
        },
        'ng2-codemirror': {                             // this does not work
            main: 'Codemirror.js',
            defaultExtension: 'js'
        }
    }
  });
})(this);

在 index.html 内部调用

<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/systemjs.config.js"></script>
<script>
    System.import('app').catch(function(err) {
        console.log(err);
    });
</script>

这是我的 node_modules/ 文件夹，其中包含相关文件夹/文件

index.html
system.js.config
node_modules/
    ng2-datetime-picker/
        dist/
            ng2-datetime-picker.umd.js
    ng2-codemirror/
        lib/
            Codemirror.js

现在，我真的希望这是我的问题的足够背景。当我加载页面时，我在 Web 控制台中收到以下错误消息。

GET XHR http://localhost:8050/codemirror [HTTP/1.1 404 Not Found 4ms]
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:8050/codemirror
patchProperty/desc.set/wrapFn@http://localhost:8050/node_modules/zone.js/dist/zone.js:698:26
ZoneDelegate.prototype.invokeTask@http://localhost:8050/node_modules/zone.js/dist/zone.js:265:21
Zone.prototype.runTask@http://localhost:8050/node_modules/zone.js/dist/zone.js:154:28
ZoneTask/this.invoke@http://localhost:8050/node_modules/zone.js/dist/zone.js:335:28

Error loading http://localhost:8050/codemirror as "codemirror" from http://localhost:8050/node_modules/ng2-codemirror/lib/Codemirror.js
Stack trace:
(SystemJS) XHR error (404 Not Found) loading http://localhost:8050/codemirror
patchProperty/desc.set/wrapFn@http://localhost:8050/node_modules/zone.js/dist/zone.js:698:26
ZoneDelegate.prototype.invokeTask@http://localhost:8050/node_modules/zone.js/dist/zone.js:265:21
Zone.prototype.runTask@http://localhost:8050/node_modules/zone.js/dist/zone.js:154:28
ZoneTask/this.invoke@http://localhost:8050/node_modules/zone.js/dist/zone.js:335:28

Error loading http://localhost:8050/codemirror as "codemirror" from http://localhost:8050/node_modules/ng2-codemirror/lib/Codemirror.js

我不知道这个堆栈跟踪是怎么回事，但似乎正在尝试发出请求

localhost:8050/codemirror

它失败了。它似乎也在尝试加载“codemirror”....我在 datetimepicker 上没有这个问题。有谁知道如何帮助我解决这个问题？ datetimepicker 工作，我正在尝试对 codemirror 模块做同样的事情。

编辑，我遵循了一些说明，现在我的 system.config.js 看起来像这样（当然是我已经拥有的东西）

map : {
    // previous stuff
    'codemirror' : 'npm:codemirror'
},
packages : {

    // previous stuff

    'codemirror' : {
        main: 'lib/codemirror.js',
        defaultExtension: 'js'
    },
    'ng2-codemirror' : {
        format: 'global',
        main: 'Codemirror.js',
        defaultExtension: 'js'
    }
}

我还下载了“codemirror”项目到我的节点模块文件夹中。

node_modules/
    codemirror/
        lib/
            codemirror.js

现在，当我运行应用程序时，我得到以下堆栈跟踪。

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:8050/node_modules/ng2-codemirror/lib/Codemirror.js
patchProperty/desc.set/wrapFn@http://localhost:8050/node_modules/zone.js/dist/zone.js:698:26
ZoneDelegate.prototype.invokeTask@http://localhost:8050/node_modules/zone.js/dist/zone.js:265:21
Zone.prototype.runTask@http://localhost:8050/node_modules/zone.js/dist/zone.js:154:28
ZoneTask/this.invoke@http://localhost:8050/node_modules/zone.js/dist/zone.js:335:28

Error loading http://localhost:8050/node_modules/ng2-codemirror/lib/Codemirror.js as "ng2-codemirror" from http://localhost:8050/app/app.module.js
Stack trace:
(SystemJS) XHR error (404 Not Found) loading http://localhost:8050/node_modules/ng2-codemirror/lib/Codemirror.js
patchProperty/desc.set/wrapFn@http://localhost:8050/node_modules/zone.js/dist/zone.js:698:26
ZoneDelegate.prototype.invokeTask@http://localhost:8050/node_modules/zone.js/dist/zone.js:265:21
Zone.prototype.runTask@http://localhost:8050/node_modules/zone.js/dist/zone.js:154:28
ZoneTask/this.invoke@http://localhost:8050/node_modules/zone.js/dist/zone.js:335:28

Error loading http://localhost:8050/node_modules/ng2-codemirror/lib/Codemirror.js as "ng2-codemirror" from http://localhost:8050/app/app.module.js

它的要点似乎是

Error loading http://localhost:8050/node_modules/ng2-codemirror/lib/Codemirror.js as "ng2-codemirror"

我的 app.module.ts 中的导入行如下所示

import { CodemirrorModule } from 'ng2-codemirror';

有谁知道我如何从这一点上正确选择这个模块？

Answer 1

ng2-codemirror 有codemirror 作为它的依赖，并且有

var _codemirror = require('codemirror');

在线ng2-codemirror/lib/Codemirror.js。

因为你的 systemjs 配置中没有codemirror 包的配置，所以这个require() 被翻译成http://localhost:8050/codemirror URL 并且失败了。

尝试将此添加到map 和system.js.config 中的packages：

map: {
    // .....
    'codemirror': 'npm:codemirror',
},
packages: {
    // .. 
    codemirror: {
        main: 'lib/codemirror.js'
    },

Answer 2

看看这个，对我有帮助。 https://github.com/systemjs/systemjs/issues/969 （注释行的一些问题）

简而言之，像这样编辑您的 systemjs 配置文件：

    'ng2-codemirror': {                            
        format: 'global',
        main: 'Codemirror.js',
        defaultExtension: 'js'
    }