Angular2 require is not defined for libraries in node_modules

Question

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

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

Answer 1

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:

• integrate bootstrap module and ng2-select module to angular2 5min quickstart
• angular2 failing lodash import