Where to place/find the systemjs.config.js file in an angularJS2 project?

Question

I am new to angular 2 and trying to use the ng2-datetime-picker in my project. Now after installing the ng2-datetime-picker package when I run the project got an 404 err

Answer 1

You need to create a "systemjs.config.js" file and load it from index.html, like a regular script:

Make sure you also include System.JS before the config 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' }
    }