What does systemjs.config.js do in angular 2 packaging structure?

Question

And also what does var map,packages, var config do here I am bit confused here do they do any config.I seen every project and I found everywhere they put this file. What this function do?

 (function(global) {

      // map tells the System loader where to look for things
      var map = {
        'app':                        'app', // 'dist',
        'rxjs':                       'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular':                   'node_modules/@angular',
    'primeng':                        'node_modules/primeng'
      };

      // packages tells the System loader how to load when no filename and/or no extension
      var packages = {
        'app':                        { main: 'boot.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' },
        'primeng':                    { defaultExtension: 'js' }
      };

      var packageNames = [
        '@angular/common',
        '@angular/compiler',
       //
      ];

      // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
      packageNames.forEach(function(pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
      });

      var config = {
        map: map,
        packages: packages
      }

      // filterSystemConfig - index.html's chance to modify config before we register it.
      if (global.filterSystemConfig) { global.filterSystemConfig(config); }

      System.config(config);

    })(this);

question from:https://stackoverflow.com/questions/37439855/what-does-systemjs-config-js-do-in-angular-2-packaging-structure

Answer 1

It allows to configure SystemJS to load modules compiled using the TypeScript compiler. For anonymous modules (one module per JS file), it allows to map the name of modules to JS files that actually contains the module JavaScript code.

Here is a sample. If I try to import the module named app/test, SystemJS will do:

• Try to find a preregistered module (with System.register('app/test', ...
• If not, it will look into its configuration to build the request to execute to load the corresponding file:
  • there is a map entry for app
  • there is a packages entry for app with defaultExtension = js
• The request will be http://localhost:3000/app/test.js. If you have map: { app: dist }, the request would be http://localhost:3000/dist/test.js