How do I correctly include “require” in my angular 2 project?

问题

I am still attempting to get the angular 2 code mirror module working within my angular 2 app.

I've had some import issues that I've detailed here, that I seem to have gotten past, but now I've run into a new issue.

My most recent stack trace is this

Error: (SystemJS) require is not a function
@http://localhost:8050/node_modules/ng2-codemirror/lib/codemirror.module.js:8:14
ZoneDelegate.prototype.invoke@http://localhost:8050/node_modules/zone.js/dist/zone.js:232:17
Zone.prototype.run@http://localhost:8050/node_modules/zone.js/dist/zone.js:114:24
scheduleResolveOrReject/<@http://localhost:8050/node_modules/zone.js/dist/zone.js:502:52
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
drainMicroTaskQueue@http://localhost:8050/node_modules/zone.js/dist/zone.js:401:25
ZoneTask/this.invoke@http://localhost:8050/node_modules/zone.js/dist/zone.js:339:25

Evaluating http://localhost:8050/node_modules/ng2-codemirror/lib/codemirror.module.js
Error loading http://localhost:8050/app/main.js

So, I don't have require available to me...

This is my node_modules structure

node_modules/
    require/
        bin/
            require-command.js

And my system.config.js

map: {
    // a bunch of stuff listed in my previous post (https://stackoverflow.com/questions/41837321/how-do-i-properly-set-up-my-systemjs-config-for-use-with-ng2-codemirror/41841878#41841878)
    'require' : 'npm:require',
},
packages: {
    // some package definitions found in my previous post
    'require' : {
        format: 'global', 
        main: 'bin/require-command.js',
        defaultExtension: 'js'
    }
}

This was my best attempt to "include" require, but it isn't working for me. Does anyone know how to make require available to this ng2-codemirror module?

Edit :

I went and grabbed a CDN version of require

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.js"></script>

And stuck it in my index.html... now I seem to be getting a different stack trace.

Error: (SystemJS) Module name "@angular/core" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
makeError@https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.js:168:17
localRequire@https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.js:1433:44
requirejs@https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.js:1794:16
@http://localhost:8050/node_modules/ng2-codemirror/lib/codemirror.module.js:8:14
ZoneDelegate.prototype.invoke@http://localhost:8050/node_modules/zone.js/dist/zone.js:232:17
Zone.prototype.run@http://localhost:8050/node_modules/zone.js/dist/zone.js:114:24
scheduleResolveOrReject/<@http://localhost:8050/node_modules/zone.js/dist/zone.js:502:52
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
drainMicroTaskQueue@http://localhost:8050/node_modules/zone.js/dist/zone.js:401:25
ZoneTask/this.invoke@http://localhost:8050/node_modules/zone.js/dist/zone.js:339:25

Evaluating http://localhost:8050/node_modules/ng2-codemirror/lib/codemirror.module.js
Error loading http://localhost:8050/app/main.js

It looks like the angular/core isn't available yet..? This seems like the wrong way to go about it anyways.

回答1:

I have solved this.

My code mirror namespace was a little out of scope.

I had it like this

map : {
    'ng2-codemirror' : 'npm:ng2-codemirror/lib'
},
packages : {
    'ng2-codemirror' : {
        main : 'index.js',
        defaultExtension: 'js'
    }
}

And I needed it to be like this

map : {
    'ng2-codemirror' : 'npm:ng2-codemirror'
},
packages : {
    'ng2-codemirror' : {
        main : 'lib/index.js',
        defaultExtension: 'js'
    }
}

I think by declaring the folder to be ng2-codemirror/lib inside the map section, I was missing out on some included dependencies or something.

来源：https://stackoverflow.com/questions/41984246/how-do-i-correctly-include-require-in-my-angular-2-project

标签

javascript

angular

requirejs

systemjs