anchor.diff:        become more concerned about production qualities such as
         load times and memory footprint.
   
  -    h3#systemjs SystemJS
  -    :marked
  -      QuickStart uses <a href="https://github.com/systemjs/systemjs" target="_blank">SystemJS</a>
  -      to load application and library modules. [Earlier](#add-config-files) we
  -      added the `systemjs.config.js` file to the project root.
  -      There are alternatives that work just fine including the well-regarded
  -      [webpack](guide/webpack.html).
  -      SystemJS happens to be a good choice.
  -      But we want to be clear that it was a *choice* and not a *preference*.
  -
  -      All module loaders require configuration and all loader configuration
  -      becomes complicated rather quickly as soon as the file structure diversifies and
  -      we start thinking about building for production and performance.
  -
  -      We suggest becoming well-versed in the loader of your choice.
  -      Learn more about SystemJS configuration
  -      <a href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md" target="_blank">here</a>.
  -
  -      With those cautions in mind, what are we doing in the
  -      QuickStart [`systemjs.config.js` configuration file we added earlier](#config-files)?
  -      First, we create a map to tell SystemJS where to look when we import some module.
  -      Then, we register all our packages to SystemJS:
  -      all the project dependencies and our application package, `app`.
  -
  -    .l-sub-section
  -      :marked
  -        Our QuickStart application doesn't use all of the listed packages
  -        but any substantial application will want many of them
  -        and all of the listed packages are required by at least one of the documentation samples.
  -
  -        There is no runtime harm in listing packages that we don't need as they will only be loaded when requested.
  -    :marked
  -      The `app` package tells SystemJS what to do when it sees a request for a
  -      module from the `app/` folder.
  -
  -      Our QuickStart application makes such requests when one of its
  -      application TypeScript files has an import statement like this:
  -    +makeExcerpt('app/main.ts', 'import')
  -    :marked
  -      Notice that the module name (after `from`) does not mention a filename extension.
  -      In the configuration we tell SystemJS to default the extension to `js`, a JavaScript file.
  -
  -      That makes sense because we transpile TypeScript to JavaScript
  -      *before* running the application.
  -
  -    .l-sub-section
  -      :marked
  -        #### Transpiling in the browser
  -        In the live example on plunker we transpile (AKA compile) to JavaScript in the browser
  -        on the fly. _That's fine for a demo_.
  -
  -        **Do not transpile in the browser during development or for production**.
  -
  -        We strongly recommend transpiling (AKA compiling) to JavaScript during a build phase
  -        before running the application for several reasons including:
  -
  -        * We see compiler warnings and errors that are hidden from us in the browser.
  -
  -        * Precompilation simplifies the module loading process and
  -        it's much easier to diagnose problems when this is a separate, external step.
  -
  -        * Precompilation means a faster user experience because the browser doesn't waste time compiling.
  -
  -        * We iterate development faster because we only recompile changed files.
  -        We notice the difference as soon as the app grows beyond a handful of files.
  -
  -        * Precompilation fits into a continuous integration process of build, test, deploy.
  -
  -    :marked
  -      The `System.import` call tells SystemJS to import the `main` file
  -      (`main.js` ... after transpiling `main.ts`, remember?);
  -      `main` is where we tell Angular to launch the application.
  -      We also catch and log launch errors to the console.
  -
  -      All other modules are loaded upon request
  -      either by an import statement or by Angular itself.
  -
  -      ### *&lt;my-app&gt;*
  -
  -  a#my-app
  -  :marked
  -    When Angular calls the `!{_bootstrapModule}` function in <span ngio-ex>main.ts</span>,
  -    it reads the `!{_AppModuleVsAppComp}` metadata<span if-docs="ts">, sees that 
  -    `AppComponent` is the bootstrap component</span>,
  -    finds the `my-app` selector, locates an element tag named `my-app`,
  -    and renders our application's view between those tags.
  -
   :marked
     ### Add some style
     Styles aren't essential but they're nice, and `index.html` assumes we have
  
positive.code:       #[b typings.json] provides additional definition files for libraries that the TypeScript
        compiler doesn't natively recognize.
      li.
        #[b systemjs.config.js] provides instructions for loading application and library modules.
        (We use SystemJS here, but you could also use webpack for the same purpose.)
  
    p.
      Learn more about all these configuration files in the
      #[a(href="guide/npm-packages.html") Npm Package Configuration] guide, the
      #[a(href="#{_tsconfigUri}") TypeScript Configuration] guide, and in the
      #[a(href="#systemjs") SystemJS] section later in this guide.
  
    p.
      Create each of these files in your project directory. Populate them by pasting in text from
  
negative.code: 
  +makeExample('app/app.component.ts')
  
  :marked
    Components are the basic building blocks of Angular applications. A component controls a portion
    of the screen&mdash;a *view*&mdash;through its associated template.
  
    Every Angular app has at least one *root component*, conventionally named `AppComponent`, that
    hosts the client user experience.
  
    The QuickStart application has the same essential structure as any other Angular component:
  
      * **An import statement**. Importing gives your component access to
      Angular's core [`@Component` decorator function](../latest/api/core/index/Component-decorator
      .html).
      * **A @Component #{_decorator}** that associates *metadata* with the
          `AppComponent` component class:
  
          - a *selector* that specifies a simple CSS selector for an HTML element that represents
            the component
          - a *template* that tells Angular how to render the component's view.
      * **A component class** that controls the appearance and behavior of a view
      through its template. Here, we only have the root component, `AppComponent`.
  
    The `AppComponent` class is the root of the application. Since you don't need any
    application logic in the simple QuickStart example, it's empty. In a real application, the
    component class would define properties and application logic.
  
    You *export* the `AppComponent` class so that you can *import* it elsewhere in your
    application.
  
  
  +ifDocsFor('ts')
    .l-main-section
    h1#ngmodule Step 3: Create the application's root module
    :marked
      You compose Angular applications into closely related blocks of functionality with [Angular
      Modules](guide/ngmodule.html). Angular itself is split into separate Angular Modules. This
      makes it possible for you to keep payload size small by only importing the parts of Angular
      that your application needs.
  
      Every application requires at least one module: the _root module_, named `AppModule` by convention.
  
      Create the file `app/app.module.ts` with the following content:
  
    +makeExample('app/app.module.ts')(format='.')
  
    :marked
      You're passing metadata to the `NgModule` decorator function:
  
      * `imports` - the _other_ modules that export things that we need in _this_ module.
  
      * `declarations` - components and directives that belong to _this_ module.
  
      * `bootstrap` - the _root component_ that Angular should _bootstrap_ when it
      starts the application.
  
      This module definition imports the application's single component, `app.component.ts`, and
      adds it to both the `declarations` and `bootstrap` arrays.
  
      Since the QuickStart application is a web application that runs in a browser, your root module
      needs to import the
      [`BrowserModule`](../latest/api/platform-browser/index/BrowserModule-class.html)
      from `@angular/platform-browser` to the `imports` array.
  
      This is the smallest amount of Angular that is needed for a minimal application to run in the
      browser.
  
      The QuickStart application doesn't do anything else, so you don't need any other modules. In a real
      application, you'd likely import [`FormsModule`](../latest/api/forms/index/FormsModule-class
      .html) as well as [`RouterModule`](../latest/api/router/index/RouterModule-class.html) and
      [`HttpModule`](../latest/api/http/index/HttpModule-class.html). These are introduced in the
      [Tour of Heroes Tutorial](../tutorial/).
  
  .l-main-section
  h1#main Step !{step++}: Add #[code #[+adjExPath('main.ts')]]
  
  block create-main
    :marked
  