SystemJS is the library you are using to handle the loading of modules and consists of two links:

• SystemJS core files
• SystemJS configuration file

The former is needed for SystemJS to run and the latter is you instructing SystemJS what files to load and where to find your app and accompanying assets.

This points out the core SystemJS file:

<script src="node_modules/SystemJS/dist/system.scr.js"></script>

And this points out how to configure SystemJS. You need to call this file SystemJS.config.js:

<script src="SystemJS.config.js"></script>

A look at SystemJS.config.js shows the following configuration call being made:

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'
  },
  // packages tells the System loader how to load when no filename and/or no extension
  packages: {
    app: {
      defaultExtension: 'js',
      meta: {
        './*.js': {
          loader: 'SystemJS-angular-loader.js'
        }
      }
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

It looks quite long and daunting, but let's break the different parts down which is as follows:

• paths: Alias where system files are located. Noteworthy here is that we create an alias to node_modules by typing:

        path: { 'npm:': 'node_modules/'}

This will serve us later when we need to mention all the libraries that our app needs to function.

• map: This is where we need to tell SystemJS where it can find all the parts.

The following code snippets show the following:

• • Where to find our app, the key called app
  • Where to find the Angular files, key called @angular/...
  • Where to find supporting libraries, these libraries consist of angular libraries (the framework is split up in many smaller libraries) as well as the core libraries mentioned in the last section

         map : {
           app : app,  // instruct that our app can be found in the app directory
           '@angular/core': 'npm:@angular/core/bundles/core.umd.js'
           // supporting libraries omitted for brevity
         }

Here, we can see our alias npm  in use when referring to @angular/core, which means the following:

        'npm: @angular/core/bundles/core.umd.js'

Is using the following full path:

        'node_modules/@angular/core/bundles/core.umd.js'

• packages: It is the last part of the configuration file. This instructs what files in the app folder should be loaded first, aka main, and also provides the defaultExtension.