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

Question

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?

Answer 1

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