6

I am using angular2-seed as a seed for my project. The require is working perfectly fine in source files. But whenever I include a new library and reference it in index.html, there pops ups an error in console that require is not defined.

Systemjs is included

I have READ previous answers on SO which suggests to use system.js. The systemjs is already included.

Index.html

<!-- shims:js --> <script src="/node_modules/systemjs/dist/system.src.js?1458283463580"></script> <script src="/node_modules/systemjs/dist/system-polyfills.src.js?1458283463581"></script> <script src="/node_modules/reflect-metadata/Reflect.js?1458283463582"></script> <script src="/node_modules/es6-shim/es6-shim.js?1458283463582"></script> <script src="/node_modules/angular2/bundles/angular2-polyfills.js?1458283463582"></script> <!-- endinject --> <script>System.config({"defaultJSExtensions":true,"paths":{"./admin/main":"/./admin/main","angular2/*":"/angular2/*","rxjs/*":"/rxjs/*","*":"/node_modules/*"},"packages":{"angular2":{"defaultExtension":false},"rxjs":{"defaultExtension":false}},"map":{"moment":"moment/moment.js"}})</script> <!-- libs:js --> <script src="/node_modules/rxjs/bundles/Rx.js?1458283463585"></script> <script src="/node_modules/angular2/bundles/angular2.js?1458283463585"></script> <script src="/node_modules/angular2/bundles/router.js?1458283463585"></script> <script src="/node_modules/angular2/bundles/http.js?1458283463586"></script> <script src="/node_modules/ng2-bootstrap/ng2-bootstrap.js?1458283463586"></script> <script src="/node_modules/ng2-select/ng2-select.js?1458283463586"></script> <script src="/node_modules/lodash/index.js?1458283463587"></script> <script src="/node_modules/ng2-pagination/index.js?1458283463587"></script> <!-- endinject --> <!-- inject:js --> <!-- endinject --> <script> System.import('./admin/main') .catch(function (e) { console.error(e, 'Report this error at https://github.com/punchagency/staffing-client/issues'); }); </script>

Error

enter image description here

Source where require is used

index.js of lodash

module.exports = require('./lodash');

Similarly other libraries like ng2-select and ng2-bootstrap have similar errors

Improve this question

1 Answer 1

Reset to default
4

You need to configure your additional dependencies in SystemJS and not include them directly into script tag.

Here is a sample:

<script> System.configure({ map: { 'ng2-bootstrap': 'node_modules/ng2-bootstrap', 'ng2-select': 'node_modules/ng2-select', lodash: 'node_modules/lodash/lodash.js' }, package: { (...) } }); System.import(...); </script>

See these questions for more details:

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks a lot @Theirry, the systemConfig solution is working. But if lodash/index.js is added instead of lodash/lodash.js then the require error comes again. The index.js of lodash just has this module.exports = require('./lodash'); ........why lodash.js is working and not the index.js....??

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.