Getting Started with Angular



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 = [
  // 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); });

Like this article? Follow @chrisoncode on Twitter