如何正确设置与ng2-codemirror一起使用的systemjs.config？ [英] How do I properly set up my systemjs.config for use with ng2-codemirror?

查看：103
本文介绍了如何正确设置与ng2-codemirror一起使用的systemjs.config？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试导入 codemirror ng2模块以在angular 2中使用我正在编写的应用程序，并遇到一些设置问题。为此，我尝试遵循ng2-datetime-picker导入（DID工作）。这是我的system.js.config 

 （function（global）{
 System.config（{
路径：{
'npm：'：'node_modules /'
}，
映射：{
 app：'app'，
 // .... 。
 //一堆角度库
 // ...... 
'ng2-datetime-picker'：'npm：ng2-datetime-picker / dist'，// 
'ng2-codemirror：'npm：ng2-codemirror / lib'//无效
}，
软件包：{
 app：{
 main：'./main.js'，
默认值：'js'
}，
'ng2-datetime-picker'：{
 main：'ng2-datetime-picker .umd.js'，//可以使用
 defaultExtension：'js'
}，
'ng2-codemirror'：{//不能使用
 main：'Codemirror .js'，
 defaultExtension：'js'
} 
} 
}）; 
}）（this）;

在index.html内称为

 <脚本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找不到4ms] 
错误：（SystemJS）XHR错误（找不到404）正在加载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 
 
从http：// localhost加载http：// localhost：8050 / codemirror作为 codemirror时出错：8050 / node_modules / ng2-codemirror / lib / Codemirror.js 
堆栈跟踪：
（SystemJS）XHR错误（404未找到）加载http：// localhost：8050 / codemirror 
 patchProperty /desc.set/wrapFn@http://localhost:8050/node_modules/zone.js/dist/zone.js:698:26 
 Zo neDelegate.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 
 
从http：// localhost：8050 / node_modules / ng2-codemirror / lib / Codemirror.js 
  <加载http：// localhost：8050 / codemirror作为 codemirror时出错/ pre> 
 
 
我不知道此堆栈跟踪信息是怎么回事，但似乎正在尝试发出一个请求
  localhost：8050 / codemirror 
  
失败了。它似乎还试图加载 codemirror。...datetimepicker没有此问题。有谁知道如何帮助我解决这个问题？ datetimepicker有效，我正在尝试使用Codemirror模块做同样的事情。
 
 
 
编辑，我遵循了一些说明，现在我的system.config.js看起来像这样（当然，有了我已经拥有的东西）
  map：{
 //以前的东西
'codemirror'：'npm：codemirror'
}，
包：{
 
 //以前的东西
 
'codemirror'：{
 main：'lib / codemirror.js'，
 defaultExtension：'js'
}，
'ng2-codemirror'：{
格式：'global'，
 main：'Codemirror.js'，
默认扩展名：'js'
} 
} 
  
我还已经将 codemirror项目下载到我的node modules文件夹中。
  node_modules / 
 codemirror / 
 lib / 
 codemirror.js 
  
现在，当我运行该应用程序时，得到以下堆栈跟踪。
 错误：（SystemJS）XHR错误（404未找到）加载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 
 
加载http：// localhost：8050 / node_modules / ng2-codemirror / lib / Codemirror时出错。 js作为http：// localhost：8050 / app / app.module.js中的 ng2-codemirror，
堆栈跟踪：
（SystemJS）XHR错误（找不到404）加载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 
 
将http：// localhost：8050 / node_modules / ng2-codemirror / lib / Codemirror.js加载为 ng2-codemirror时出错来自http：// localhost：8050 / app / app.module.js 
  
似乎是
 将http：// localhost：8050 / node_modules / ng2-codemirror / lib / Codemirror.js加载为 ng2-codemirror 
  
我app.module.ts中的导入行如下
  import {CodemirrorModule}从'ng2-codemirror'; 
  
有人知道我如何才能正确地从这一点开始学习这个模块吗？
解决方案
 ng2-codemirror具有 codemirror 作为其依赖项，并且有
  var _codemirror = require（'codemirror'）; 
  
  ng2-codemirror / lib / Codemirror.js 。
 
 
 
由于在systemjs配置中没有配置 codemirror 软件包，因此该 require（）转换为 http：// localhost：8050 / codemirror  URL，并且失败。
 
 
 
尝试将其添加到 system.js中的 map 和包中。配置：
  map：{
 // ..... 
'codemirror'：'npm：codemirror'，
}，
软件包：{
 // // .. 
 codemirror：{
 main：'lib / codemirror。 js'
}，
  
 
I am attempting to import the codemirror ng2 module for use in an angular 2 app I am writing, and running into some setup issues. In doing this, I'm trying to follow along with my ng2-datetime-picker import, which DID work. Here is my 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);

It is called inside the 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>

Here is my node_modules/ folder with relevant folders/files
index.html
system.js.config
node_modules/
    ng2-datetime-picker/
        dist/
            ng2-datetime-picker.umd.js
    ng2-codemirror/
        lib/
            Codemirror.js

Now, I really hope this is enough background of my problem. When I load the page, I get the following error message inside the web console.
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

I don't know what's up with this stacktrace, but it seems like a request is trying to be made to
localhost:8050/codemirror

and it is failing. It also seems to be trying to load "codemirror".... I did not have this issue with the datetimepicker. Does anyone have an idea of how to help me out with this? The datetimepicker worked, I'm trying to do the same thing with codemirror module.



Edit, I followed some of the instructions, and now my system.config.js looks like this (with the stuff I already had, of course)
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'
    }
}

And I have also downloaded the "codemirror" project to my node modules folder.
node_modules/
    codemirror/
        lib/
            codemirror.js

Now, when I run the app, I get the following stack trace.
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

This gist of it seems to be
Error loading http://localhost:8050/node_modules/ng2-codemirror/lib/Codemirror.js as "ng2-codemirror"

The import line in my app.module.ts looks like this
import { CodemirrorModule } from 'ng2-codemirror';

Anyone know how I can properly pick up this module from this point?
 解决方案 
ng2-codemirror has codemirror as its dependency, and there is 
var _codemirror = require('codemirror');

line in ng2-codemirror/lib/Codemirror.js.



Because there is no configuration for codemirror package in your systemjs config, this require() is translated into  http://localhost:8050/codemirror URL and fails.



Try adding this to map and packages in system.js.config:
map: {
    // .....
    'codemirror': 'npm:codemirror',
},
packages: {
    // .. 
    codemirror: {
        main: 'lib/codemirror.js'
    },



                        
这篇关于如何正确设置与ng2-codemirror一起使用的systemjs.config？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆