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 error stating ng2-datetime-picker not found, after going through some blogs I came to know that I had to add the configuration in the systemjs.config.js file but when I went through my project I cannot see any systemjs.config.js file in my project. so my question is,

1. where does the systemjs.config.js file exist?

2. Is the below code meant to be the systemjs.config.js file

   System.import('app').catch(function (err) { console.error(err); });

3. If it is, then how can I add map and packages to this file

   map[‘ng2-datetime-picker'] = 'node_modules/ng2-datetime-picker/dist'; packages[‘ng2-datetime-picker'] = { main: 'ng2-datetime-picker.umd.js', defaultExtension: 'js’ } update 1

This is my systemjs.config.js file

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app : 'ScriptsApp', // 'dist',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'ng2-datetime-picker': 'npm:ng2-datetime-picker'
        },
        // 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: 'ng2-datetime-picker.umd.js', defaultExtension: 'js' }
        }
    });
})(this);

and the added reference in the index.js file is

 <!-- Polyfills for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/[email protected]?main=browser"></script>
    <script src="https://unpkg.com/[email protected]/dist/system.src.js"></script>
    <script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>

this is the error i am getting after adding the systemjs.config.js file and the refrence in the index.html file

Answer 1

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' }
    }