Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

angular

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); 
like image 801
Sarvesh Yadav Avatar asked May 25 '16 14:05

Sarvesh Yadav


1 Answers

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
like image 197
Thierry Templier Avatar answered Sep 17 '22 21:09

Thierry Templier