Question

我正在尝试导入the codemirror ng2 module以便在我正在编写的角度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 /文件夹及相关的文件夹/文件

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网址并失败。

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

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'
    }

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

2 个答案: