You need to create a “systemjs.config.js” file and load it from index.html, like a regular script:
<script src="systemjs.config.js"></script>
Make sure you also include System.JS before the config script:
<script src="node_modules/systemjs/dist/system.src.js"></script>
The following script loads the first module:
System.import('app').catch(function (err) { console.error(err); });
By default (according to your systemjs.config.js), SystemJS will look for app.js or app/main.js.
In your systemjs.config.js file, you want to map the node package to a path where there is an index.js or package.json, which indicates where the module is located. The module should be compatible with your module loader that you intend to use: AMD, UMD, CommonJS, SystemJS, es6 etc
The following should work in your systemjs.config.js file:
'paths': { 'npm:':'node_modules/' }, 'map': { 'ng2-datetime-picker': 'npm:ng2-datetime-picker' ... }, 'packages': { 'ng2-datetime-picker': 'dist/ng2-datetime-picker.umd.js' }
Or, you could map the UMD file directly:
'paths': { 'npm:':'node_modules/' }, 'map': { 'ng2-datetime-picker': 'npm:ng2-datetime-picker/dist/ng2-datetime-picker.umd.js' ... }
The following will only work with CommonJS/AMD/SystemJS as index.js uses the ‘require’ syntax:
'paths': { 'npm:':'node_modules/' }, 'map': { 'ng2-datetime-picker': 'npm:ng2-datetime-picker' ... }, 'packages': { 'ng2-datetime-picker': 'dist/index.js' }
EDIT
This should work:
// packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: 'boot.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'ng2-datetime-picker': { main: 'dist/ng2-datetime-picker.umd.js', defaultExtension: 'js' } }