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

Question

我正在尝试导入 the codemirror ng2 module 以便在我正在编写的 angular 2 应用程序中使用，并且运行会遇到一些设置问题。在这样做时，我试图跟随我的 ng2-datetime-picker 导入，它 DID 工作。这是我的 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/ 文件夹，其中包含相关 folders/files

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

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

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

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

Answer 2

ng2-codemirror 有 codemirror 作为它的依赖，还有

var _codemirror = require('codemirror');

ng2-codemirror/lib/Codemirror.js 中的行。

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

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

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

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

How do I properly set up my systemjs.config for use with ng2-codemirror?

codemirror

node-modules

systemjs

angular