What is system.config.js file in angular 2?

Question

what does var map, packages, var config do. Also explain all the configuration properties for the map and package object. Is there any documentation for an accessible configuration?

Here is my system configuration file

/** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (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: 'app', // 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', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 'fscopy': 'npm:fs-extra/lib/copy/index.js', 'file-system': 'npm:file-system/file-system.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, fs: { defaultExtension: 'js' } } }); })(this); 

Answer 1

system.config.js is one that allows you to load modules (node ​​modules) compiled using TypeScript. compiler.map refers to the name of the modules in the JS file containing the JavaScript code.

Answer 2

I would like to continue the answer to @Sajeetharan with a detailed example. So imagine that you want to install a new module, we will use angular2-highcharts as an example. For reference, here is a document for hightcharts .

• as you know, you start by running your npm command npm install angular2-highcharts --save

  but. Now you will see the installed module in the node_modules folder

• So, you have installed a new module for use, now you must tell your application where to find this new module and how to download it. Here you enter the game systemjs.config.js .

  but. First you need to " map " or tell your application where to find this new module. in this case it looks like this ... 'angular2-highcharts': 'node_modules/angular2-highcharts',

  • now lets break it a bit. 'angular2-highcharts': This means that if you are referring to angular2 -highcharts, then use the following path: node_modules / angular2 -highcharts

  b. Next is the Package part. now you say: it’s good that you have matched where to find this new module, now what inside this new module folder would you like to run? in this case, it is `index.js', and we determine that so ...

   angular2-highcharts': { main: './index.js', defaultExtension: 'js' } 

  Now that you have installed the module correctly and referenced it in systemjs.config.js, you can call the import in your component "app.modules" and in any component that you want.

Edit

forgot to explain config . Configuration is just a way to identify folders or a file with a short hand value. In your npm: node_modules , they basically say that you can briefly pass node_modules with npm. this is shown in you, displaying statements like this .... 'npm:@angular/core/bundles/core.umd.js' instead of writing node_modules/@angular/core/bundles/core.umd.js