Getting Started with Angular: Lesson 8 of 26


Up Next

Taking a Step Back

Autoplaying in 7 seconds!



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:

Table of Contents

    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 = [
      // 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
      var config = {
        map: map,
        packages: packages

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

        <meta charset="UTF-8">
        <title>My Angular 2 App!</title>
        <!-- css -->
        <link rel="stylesheet" href="">
        <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>
            System.import('app').catch(function(err) { console.error(err); });

    Chris Sevilleja

    176 posts

    Founder of Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.