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

Question

I am new to angular 2 and am trying to use the ng2-datetime collector in my project. Now, after installing the ng2-datetime-picker package, when I start the project, a 404 error appeared in which ng2-datetime-picker was not found , after looking at some blogs I found out that I had to add configurations in the systemjs.config.js file, but when I looked at my project, I do not see the systemjs.config.js file in my project. so my question is:

• Where does the systemjs.config.js file exist?

• Is the code below the systemjs.config.js file

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

• If so, then how can I add a 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 link in the index.js file

  <!-- Polyfills for older browsers --> <script src="https://unpkg.com/core-js/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script> <script src="https://unpkg.com/systemjs@0.19.39/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 get after adding systemjs.config.js and refrence file in index.html file

Answer 1

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

  <script src="systemjs.config.js"></script> 

Make sure you also enable System.JS before configuring the 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 system js.config.js), SystemJS will look for app.js or app / main.js.

In the systemjs.config.js file, you want to map the node package to a path where index.js or package.json is, 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.

In the systemjs.config.js file, the following should work:

 'paths': { 'npm:':'node_modules/' }, 'map': { 'ng2-datetime-picker': 'npm:ng2-datetime-picker' ... }, 'packages': { 'ng2-datetime-picker': 'dist/ng2-datetime-picker.umd.js' } 

Or you can directly map the UMD file:

 '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, since index.js uses the syntax "require":

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

Answer 2

For those who are looking for content systemjs.config.js . It will be something like this, you can customize it according to your requirements.

 /** * System configuration for Angular 2 samples * Adjust as necessary for your application needs. */ (function(global) { // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, }; var ngPackageNames = [ 'common', 'compiler', 'core', 'forms', 'http', 'platform-browser', 'platform-browser-dynamic', 'router', 'router-deprecated', 'upgrade', ]; // Individual files (~300 requests): function packIndex(pkgName) { packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; } // Bundled (~40 requests): function packUmd(pkgName) { packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; } // Most environments should use UMD; some (Karma) need the individual index files var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; // Add package entries for angular packages ngPackageNames.forEach(setPackageConfig); var config = { map: map, packages: packages }; System.config(config); })(this); 

And your index.html will look like this: (Take care of the order of the .js file)

 <head> <meta charset="UTF-8"> <title>My Angular 2 App!</title> <!-- css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css"> <style>body { padding: 50px 0; }</style> <!-- js --> <!-- load the dependencies --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <!-- load our angular app with systemjs --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err) { console.error(err); }); </script> </head>