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

Question

what does var map,packages, var config do. And also the explain all the configuration property for the map and package object. Is there any documentation for available configuration?

Here is my System Config 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

I would like to follow up on @Sajeetharan answer by giving an in depth example. So pretend you want to install a new module, we will use angular2-highcharts as an example. For reference here is the doc for hightcharts.

1. as you know you begin by running your npm command npm install angular2-highcharts --save

   a. Now you will see the installed module in your node_modules folder

2. OK so you have installed a new module to use, now you have to tell your app where to find this new module and how to load it. This is where you systemjs.config.js come into play.

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

   1. now lets break this down a little. 'angular2-highcharts': this is saying if you are referencing angular2-highcharts then use the following path of 'node_modules/angular2-highcharts'

   b. Next is the Package portion. this is now saying, ok you have mapped where to find this new module, now what inside of this new module folder would you like to run? in this case its the `index.js' and we define that like so...

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

   Now that you have properly installed the module and referenced it in your systemjs.config.js you can call the import in your 'app.modules' component and in whatever component you wish.

Edit

forgot to explain config. Config is just a way to define folders or file with a short hand value. In your config npm: node_modules, is basically saying you can short hand node_modules with npm. this is shown in you mapping statements like so.... 'npm:@angular/core/bundles/core.umd.js' rather than writing out node_modules/@angular/core/bundles/core.umd.js