+1 vote
in Angular by
Explain systemjs.config.json file.

1 Answer

0 votes
by

This file contains the system files required for Angular JS application. This loads all the necessary script files without the need to add a script tag to the html pages. The typical files will have the following code.

/** 

 * 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/platformbrowser/bundles/platform-browser.umd.js', 

         '@angular/platform-browser-dynamic': 'npm:@angular/platform-browserdynamic/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/inmemory-web-api.umd.js' 

      }, 

     

      // packages tells the System loader how to load when no filename and/or no extension 

      packages: { 

         app: { 

            defaultExtension: 'js' 

         }, 

         rxjs: { 

            defaultExtension: 'js' 

         } 

      } 

   }); 

})(this); 

Some key points to note about the above code -

'npm:': 'node_modules/' tells the location in our project where all the npm modules are located.

The mapping of app: 'app' tells the folder where all our applications files are loaded.

Related questions

+1 vote
asked Jan 24, 2022 in Angular by sharadyadav1986
+1 vote
asked Jan 26, 2022 in Angular Oriana by sharadyadav1986
...