Video Course

Getting Started with Angular v4: Lesson 8 of 26

System.js

Up Next

Taking a Step Back

Autoplaying in 7 seconds!

Cancel

Create a Free Account to Watch

Sign Up Now

Login to your account

Important

The Angular quickstart no longer shows the System.js setup. Copy and paste the one below into your systemjs.config.js. The Angular quickstart uses a different one because it compiles TypeScript in the browser. That leads to a slower app since the compilation happens when a user visits. We will compile before a user visits for fastest app times.

Note: The code for this video won't be complete yet. System.js is trying to load the main.js file, but we haven't created that yet. We'll do that in the next video and give System.js something to load.

Whenever you see an ES6 import, know that this represents a module being loaded. For instance, the following is an ES6 import:

import { Component } from '@angular/core';

Browsers don't support loading packages like this so we'll need a loader. For this course, we'll use System.js.

We could have also chosen the great Webpack, but System.js is a little easier on initial setup. Also, the Angular quickstart uses System.js while the Angular CLI uses Webpack. So both options are valid.

We'll need to create a systemjs.config.js file. This file's job is to tell System.js where to look for specific packages.

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

We'll then bring it all together in the <head> of our index.html file:

<head>
    <meta charset="UTF-8">
    <title>My Angular 2 App!</title>

    <!-- css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
    <style>body { padding: 50px 0; }</style>

    <!-- js -->
    <!-- load the dependencies -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>

    <!-- load our angular app with systemjs -->
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function(err) { console.error(err); });
    </script>
</head>

Chris Sevilleja

157 posts

Co-founder of Scotch.io. Slapping the keyboard until something good happens.