build(aio): change examples to CLI (#19248)

PR Close #19248
2017-08-22 21:31:15 +02:00
parent 344a5ca545
commit 9bbf009dff
377 changed files with 2339 additions and 1748 deletions
@@ -1,8 +1,22 @@
 # boilerplate files
+**/src/environments/environment.prod.ts
+**/src/environments/environment.ts
+**/src/assets/.gitkeep
 **/src/styles.css
 **/src/systemjs-angular-loader.js
 **/src/systemjs.config.js
 **/src/tsconfig.json
+**/src/favicon.ico
+**/src/polyfills.ts
+**/src/test.ts
+**/src/tsconfig.app.json
+**/src/tsconfig.spec.json
+**/src/typings.d.ts
+**/e2e/app.po.ts
+**/e2e/tsconfig.e2e.json
+**/.angular-cli.json
+**/.editorconfig
+**/tsconfig.json
 **/bs-config.e2e.json
 **/bs-config.json
 **/package.json
@@ -53,14 +67,18 @@ dist/

 # testing
 !testing/src/browser-test-shim.js
-!testing/karma*.js

 # webpack
 !webpack/**/config/*.js
 !webpack/**/*webpack*.js
+!webpack/src/polyfills.ts

 # styleguide
 !styleguide/src/systemjs.custom.js

 # plunkers
 *plnkr.no-link.html
+
+# ngUpgrade testing
+!upgrade-phonecat-*/**/karma.conf.js
+!upgrade-phonecat-*/**/karma-test-shim.js
@@ -83,7 +83,7 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
  }

  function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
-    let posterButton = element(by.css('movie-list tr > th > button'));
+    let posterButton = element(by.css('app-movie-list tr > th > button'));
    expect(posterButton.getText()).toBe(expectedButtonText);

    posterButton.click().then(function () {
@@ -92,11 +92,11 @@ describe('AngularJS to Angular Quick Reference Tests', function () {
  }

  function getMovieRows() {
-    return element.all(by.css('movie-list tbody > tr'));
+    return element.all(by.css('app-movie-list tbody > tr'));
  }

  function testFavoriteHero(heroName: string, expectedLabel: string) {
-    let movieListComp = element(by.tagName('movie-list'));
+    let movieListComp = element(by.tagName('app-movie-list'));
    let heroInput = movieListComp.element(by.tagName('input'));
    let favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
    let resultLabel = movieListComp.element(by.css('span > p'));
@@ -4,7 +4,7 @@ import { MovieService } from './movie.service';
 import { IMovie } from './movie';

@Component({
-  selector: 'my-app',
+  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [ MovieService ]
@@ -8,7 +8,7 @@ import { MovieService } from './movie.service';

 // #docregion component
@Component({
-  selector: 'movie-list',
+  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
 // #docregion style-url
  styleUrls: [ './movie-list.component.css' ],
@@ -8,7 +8,7 @@ export class MovieService {
    return [
      {
        hero: 'Celeritas',
-        imageurl: 'images/hero.png',
+        imageurl: 'assets/images/hero.png',
        movieId: 1,
        mpaa: 'pg-13',
        releaseDate: '2015-12-19T00:00:00',
@@ -19,7 +19,7 @@ export class MovieService {
      },
      {
        hero: 'Mr. Nice',
-        imageurl: 'images/villain.png',
+        imageurl: 'assets/images/villain.png',
        movieId: 2,
        mpaa: 'pg-13',
        releaseDate: '2015-12-18T00:00:00',
@@ -30,7 +30,7 @@ export class MovieService {
      },
      {
        hero: 'Angular',
-        imageurl: 'images/ng-logo.png',
+        imageurl: 'assets/images/ng-logo.png',
        movieId: 3,
        mpaa: 'pg-13',
        releaseDate: '2015-12-17T00:00:00',
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <base href="/">
    <meta charset="UTF-8">
@@ -8,21 +8,10 @@
    <!-- #docregion style -->
    <link rel="stylesheet" href="styles.css">
    <!-- #enddocregion style -->
-
-    <!-- Polyfills -->
-    <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/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
  </head>

  <body>
-    <my-app>Loading app...</my-app>
+    <app-root></app-root>
  </body>

 </html>
@@ -1,5 +1,12 @@
 // #docregion
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}

 platformBrowserDynamic().bootstrapModule(AppModule);
@@ -29,7 +29,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-basic'));
+      host = element(by.css('app-hero-list-basic'));
    });

    it('animates between active and inactive', () => {
@@ -58,7 +58,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(function() {
-      host = element(by.css('hero-list-inline-styles'));
+      host = element(by.css('app-hero-list-inline-styles'));
    });

    it('are not kept after animation', () => {
@@ -79,7 +79,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-combined-transitions'));
+      host = element(by.css('app-hero-list-combined-transitions'));
    });

    it('animates between active and inactive', () => {
@@ -108,7 +108,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-twoway'));
+      host = element(by.css('app-hero-list-twoway'));
    });

    it('animates between active and inactive', () => {
@@ -137,7 +137,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-enter-leave'));
+      host = element(by.css('app-hero-list-enter-leave'));
    });

    it('adds and removes element', () => {
@@ -157,7 +157,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(function() {
-      host = element(by.css('hero-list-enter-leave-states'));
+      host = element(by.css('app-hero-list-enter-leave-states'));
    });

    it('adds and removes and animates between active and inactive', () => {
@@ -186,7 +186,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(function() {
-      host = element(by.css('hero-list-auto'));
+      host = element(by.css('app-hero-list-auto'));
    });

    it('adds and removes element', () => {
@@ -206,7 +206,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-timings'));
+      host = element(by.css('app-hero-list-timings'));
    });

    it('adds and removes element', () => {
@@ -227,7 +227,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-multistep'));
+      host = element(by.css('app-hero-list-multistep'));
    });

    it('adds and removes element', () => {
@@ -248,7 +248,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-groups'));
+      host = element(by.css('app-hero-list-groups'));
    });

    it('adds and removes element', () => {
@@ -269,7 +269,7 @@ describe('Animation Tests', () => {
    let host: ElementFinder;

    beforeEach(() => {
-      host = element(by.css('hero-list-basic'));
+      host = element(by.css('app-hero-list-basic'));
    });

    it('animates between active and inactive', () => {
@@ -13,7 +13,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-auto',
+  selector: 'app-hero-list-auto',
  // #docregion template
  template: `
    <ul>
@@ -17,7 +17,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-basic',
+  selector: 'app-hero-list-basic',
  // #enddocregion
  /* The click event calls hero.toggleState(), which
   * causes the state of that hero to switch from
@@ -16,7 +16,7 @@ import {
 import { Hero } from './hero.service';

@Component({
- selector: 'hero-list-combined-transitions',
+ selector: 'app-hero-list-combined-transitions',
 // #docregion template
 template: `
   <ul>
@@ -13,7 +13,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-enter-leave-states',
+  selector: 'app-hero-list-enter-leave-states',
  // #docregion template
  template: `
    <ul>
@@ -13,7 +13,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-enter-leave',
+  selector: 'app-hero-list-enter-leave',
  // #docregion template
  template: `
    <ul>
@@ -14,7 +14,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-groups',
+  selector: 'app-hero-list-groups',
  template: `
    <ul>
      <li *ngFor="let hero of heroes"
@@ -15,7 +15,7 @@ import {
 import { Hero } from './hero.service';

@Component({
- selector: 'hero-list-inline-styles',
+ selector: 'app-hero-list-inline-styles',
 // #docregion template
 template: `
   <ul>
@@ -15,7 +15,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-multistep',
+  selector: 'app-hero-list-multistep',
  // #docregion template
  template: `
    <ul>
@@ -13,7 +13,7 @@ import {
 import { Hero } from './hero.service';

@Component({
-  selector: 'hero-list-timings',
+  selector: 'app-hero-list-timings',
  template: `
    <ul>
      <li *ngFor="let hero of heroes"
@@ -16,7 +16,7 @@ import {
 import { Hero } from './hero.service';

@Component({
- selector: 'hero-list-twoway',
+ selector: 'app-hero-list-twoway',
 // #docregion template
 template: `
   <ul>
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { Hero, HeroService } from './hero.service';

@Component({
-  selector: 'hero-team-builder',
+  selector: 'app-root',
  template: `
    <div class="buttons">
      <button [disabled]="!heroService.canAdd()" (click)="heroService.addInactive()">Add inactive hero</button>
@@ -15,27 +15,27 @@ import { Hero, HeroService } from './hero.service';
      <div class="column">
        <h4>Basic State</h4>
        <p>Switch between active/inactive on click.</p>
-        <hero-list-basic [heroes]="heroes"></hero-list-basic>
+        <app-hero-list-basic [heroes]="heroes"></app-hero-list-basic>
      </div>
      <div class="column">
        <h4>Styles inline in transitions</h4>
-        <p>Animated effect on click, no persistent end styles.</p>
-        <hero-list-inline-styles [heroes]="heroes"></hero-list-inline-styles>
+        <p>Animated effect on click, no persistend end styles.</p>
+        <app-hero-list-inline-styles [heroes]="heroes"></app-hero-list-inline-styles>
      </div>
      <div class="column">
        <h4>Combined transition syntax</h4>
        <p>Switch between active/inactive on click. Define just one transition used in both directions.</p>
-        <hero-list-combined-transitions [heroes]="heroes"></hero-list-combined-transitions>
+        <app-hero-list-combined-transitions [heroes]="heroes"></app-hero-list-combined-transitions>
      </div>
      <div class="column">
        <h4>Two-way transition syntax</h4>
        <p>Switch between active/inactive on click. Define just one transition used in both directions using the <=> syntax.</p>
-        <hero-list-twoway [heroes]="heroes"></hero-list-twoway>
+        <app-hero-list-twoway [heroes]="heroes"></app-hero-list-twoway>
      </div>
      <div class="column">
        <h4>Enter & Leave</h4>
        <p>Enter and leave animations using the void state.</p>
-        <hero-list-enter-leave [heroes]="heroes"></hero-list-enter-leave>
+        <app-hero-list-enter-leave [heroes]="heroes"></app-hero-list-enter-leave>
      </div>
    </div>
    <div class="columns">
@@ -45,27 +45,27 @@ import { Hero, HeroService } from './hero.service';
          Enter and leave animations combined with active/inactive state animations.
          Different enter and leave transitions depending on state.
        </p>
-        <hero-list-enter-leave-states [heroes]="heroes"></hero-list-enter-leave-states>
+        <app-hero-list-enter-leave-states [heroes]="heroes"></app-hero-list-enter-leave-states>
      </div>
      <div class="column">
        <h4>Auto Style Calc</h4>
        <p>Leave animation from the current computed height using the auto-style value *.</p>
-        <hero-list-auto [heroes]="heroes"></hero-list-auto>
+        <app-hero-list-auto [heroes]="heroes"></app-hero-list-auto>
      </div>
      <div class="column">
        <h4>Different Timings</h4>
        <p>Enter and leave animations with different easings, ease-in for enter, ease-out for leave.</p>
-        <hero-list-timings [heroes]="heroes"></hero-list-timings>
+        <app-hero-list-timings [heroes]="heroes"></app-hero-list-timings>
      </div>
      <div class="column">
        <h4>Multiple Keyframes</h4>
        <p>Enter and leave animations with three keyframes in each, to give the transition some bounce.</p>
-        <hero-list-multistep [heroes]="heroes"></hero-list-multistep>
+        <app-hero-list-multistep [heroes]="heroes"></app-hero-list-multistep>
      </div>
      <div class="column">
        <h4>Parallel Groups</h4>
        <p>Enter and leave animations with multiple properties animated in parallel with different timings.</p>
-        <hero-list-groups [heroes]="heroes"></hero-list-groups>
+        <app-hero-list-groups [heroes]="heroes"></app-hero-list-groups>
      </div>
    </div>
  `,
@@ -5,26 +5,14 @@
    <title>Animations</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill for Web Animations -->
    <script src="https://unpkg.com/web-animations-js@2.2.1"></script>
-
-    <!-- Polyfills -->
-    <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/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
  </head>

  <body>
    <h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
-    <hero-team-builder></hero-team-builder>
+    <app-root></app-root>
    <button style="visibility: hidden;">External button for E2E test</button>
    <ul style="visibility: hidden;">
      <li>External list for E2E test</li>
@@ -1,4 +1,11 @@
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}

 platformBrowserDynamic().bootstrapModule(AppModule);
@@ -1,3 +1,4 @@
 {
-  "build": "build:aot"
+  "build": "build:aot",
+  "projectType": "systemjs"
 }
@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <title>Ahead of time compilation (JIT)</title>
    <base href="/">
@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <title>Ahead of time compilation</title>
    <base href="/">
@@ -79,10 +79,10 @@ function salesTaxTests() {

 function getPageElts() {
  return {
-    heroes: element.all(by.css('my-app li')),
-    heroDetail: element(by.css('my-app hero-detail')),
-    salesTaxAmountInput: element(by.css('my-app sales-tax input')),
-    salesTaxDetail: element(by.css('my-app sales-tax div'))
+    heroes: element.all(by.css('app-root li')),
+    heroDetail: element(by.css('app-root app-hero-detail')),
+    salesTaxAmountInput: element(by.css('app-root app-sales-tax input')),
+    salesTaxDetail: element(by.css('app-root app-sales-tax div'))
  };
 }

@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 // #enddocregion import

@Component({
-  selector: 'my-app',
+  selector: 'app-root',
  template: `
-    <hero-list></hero-list>
-    <sales-tax></sales-tax>
+    <app-hero-list></app-hero-list>
+    <app-sales-tax></app-sales-tax>
  `
 })
 // #docregion export
@@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';

@Component({
-  selector: 'hero-detail',
+  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html'
 })
 export class HeroDetailComponent {
@@ -1,9 +1,9 @@
 <!--#docregion binding  -->
 <li>{{hero.name}}</li>
-<hero-detail [hero]="selectedHero"></hero-detail>
+<app-hero-detail [hero]="selectedHero"></app-hero-detail>
 <li (click)="selectHero(hero)"></li>
 <!--#enddocregion binding -->

 <!--#docregion structural  -->
 <li *ngFor="let hero of heroes"></li>
-<hero-detail *ngIf="selectedHero"></hero-detail>
+<app-hero-detail *ngIf="selectedHero"></app-hero-detail>
@@ -8,4 +8,4 @@
  </li>
 </ul>

-<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>
+<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>
@@ -5,7 +5,7 @@ import { HeroService }         from './hero.service';

 // #docregion metadata, providers
@Component({
-  selector:    'hero-list',
+  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
 })
@@ -4,7 +4,7 @@ import { SalesTaxService } from './sales-tax.service';
 import { TaxRateService }  from './tax-rate.service';

@Component({
-  selector:    'sales-tax',
+  selector:    'app-sales-tax',
  template: `
    <h2>Sales Tax Calculator</h2>
    Amount: <input #amountBox (change)="0">
@@ -1,26 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <title>Architecture of Angular</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/">
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- Polyfills -->
-    <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/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
-  </head>

  <body>
-    <my-app>Loading...</my-app>
+    <app-root></app-root>
  </body>

 </html>
@@ -1,5 +1,12 @@
 // #docregion
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}

 platformBrowserDynamic().bootstrapModule(AppModule);
@@ -1,14 +1,14 @@
 <!-- #docregion -->
 <h1>My First Attribute Directive</h1>
 <!-- #docregion applied -->
-<p myHighlight>Highlight me!</p>
+<p appHightlight>Highlight me!</p>
 <!-- #enddocregion applied,  -->

 <!-- #docregion color-1 -->
-<p myHighlight highlightColor="yellow">Highlighted in yellow</p>
-<p myHighlight [highlightColor]="'orange'">Highlighted in orange</p>
+<p appHightlight highlightColor="yellow">Highlighted in yellow</p>
+<p appHightlight [highlightColor]="'orange'">Highlighted in orange</p>
 <!-- #enddocregion color-1 -->

 <!-- #docregion color-2 -->
-<p myHighlight [highlightColor]="color">Highlighted with parent component's color</p>
+<p appHightlight [highlightColor]="color">Highlighted with parent component's color</p>
 <!-- #enddocregion color-2 -->
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';

@Component({
-  selector: 'my-app',
+  selector: 'app-root',
  templateUrl: './app.component.1.html'
 })
 // #docregion class
@@ -8,11 +8,11 @@
  <input type="radio" name="colors" (click)="color='cyan'">Cyan
 </div>
 <!-- #docregion color -->
-<p [myHighlight]="color">Highlight me!</p>
+<p [appHighlight]="color">Highlight me!</p>
 <!-- #enddocregion color, v2 -->

 <!-- #docregion defaultColor -->
-<p [myHighlight]="color" defaultColor="violet">
+<p [appHighlight]="color" defaultColor="violet">
  Highlight me too!
 </p>
 <!-- #enddocregion defaultColor, -->
@@ -20,5 +20,5 @@
 <hr>
 <p><i>Mouse over the following lines to see fixed highlights</i></p>

-<p [myHighlight]="'yellow'">Highlighted in yellow</p>
-<p myHighlight="orange">Highlighted in orange</p>
+<p [appHighlight]="'yellow'">Highlighted in yellow</p>
+<p appHighlight="orange">Highlighted in orange</p>
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';

@Component({
-  selector: 'my-app',
+  selector: 'app-root',
  templateUrl: './app.component.html'
 })
 // #docregion class
@@ -2,7 +2,7 @@
 // #docregion
 import { Directive, ElementRef, Input } from '@angular/core';

-@Directive({ selector: '[myHighlight]' })
+@Directive({ selector: '[appHighlight]' })
 export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
@@ -4,7 +4,7 @@
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
-  selector: '[myHighlight]'
+  selector: '[appHighlight]'
 })
 export class HighlightDirective {
  // #docregion ctor
@@ -3,13 +3,13 @@
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
-  selector: '[myHighlight]'
+  selector: '[appHighlight]'
 })
 export class HighlightDirective {

  constructor(private el: ElementRef) { }

-  @Input('myHighlight') highlightColor: string;
+  @Input('appHighlight') highlightColor: string;

  // #docregion mouse-enter
  @HostListener('mouseenter') onMouseEnter() {
@@ -4,7 +4,7 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 // #enddocregion imports

@Directive({
-  selector: '[myHighlight]'
+  selector: '[appHighlight]'
 })
 export class HighlightDirective {

@@ -15,7 +15,7 @@ export class HighlightDirective {
  // #enddocregion defaultColor

  // #docregion color
-  @Input('myHighlight') highlightColor: string;
+  @Input('appHighlight') highlightColor: string;
  // #enddocregion color

  // #docregion mouse-enter
@@ -1,25 +1,13 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Attribute Directives</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- Polyfills -->
-    <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/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
  </head>
  <body>
-    <my-app>loading...</my-app>
+    <app-root></app-root>
  </body>
 </html>
@@ -1,5 +1,12 @@
 // #docregion
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}

 platformBrowserDynamic().bootstrapModule(AppModule);
@@ -1,57 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "master-project"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.css"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json"
-    },
-    {
-      "project": "src/tsconfig.spec.json"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "component": {}
-  }
-}
@@ -1,13 +0,0 @@
-# Editor configuration, see http://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false
@@ -1,14 +0,0 @@
-'use strict'; // necessary for es6 output in node
-
-import { browser, element, by } from 'protractor';
-
-describe('cli-quickstart App', () => {
-  beforeEach(() => {
-    return browser.get('/');
-  });
-
-  it('should display message saying app works', () => {
-    let pageTitle = element(by.css('app-root h1')).getText();
-    expect(pageTitle).toEqual('Welcome to My First Angular App!!');
-  });
-});
@@ -1,14 +1,14 @@
-import { MyAppPage } from './app.po';
+'use strict'; // necessary for es6 output in node

-describe('my-app App', function() {
-  let page: MyAppPage;
+import { browser, element, by } from 'protractor';

+describe('cli-quickstart App', () => {
  beforeEach(() => {
-    page = new MyAppPage();
+    return browser.get('/');
  });

  it('should display message saying app works', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!!');
+    let pageTitle = element(by.css('app-root h1')).getText();
+    expect(pageTitle).toEqual('Welcome to My First Angular App!!');
  });
 });
@@ -1,11 +0,0 @@
-import { browser, element, by } from 'protractor';
-
-export class MyAppPage {
-  navigateTo() {
-    return browser.get('/');
-  }
-
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
-  }
-}
@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}
@@ -1,3 +0,0 @@
-export const environment = {
-  production: true
-};
@@ -1,8 +0,0 @@
-// The file contents for the current environment will overwrite these during build.
-// The build system defaults to the dev environment which uses `environment.ts`, but if you do
-// `ng build --env=prod` then `environment.prod.ts` will be used instead.
-// The list of which env maps to which file can be found in `.angular-cli.json`.
-
-export const environment = {
-  production: false
-};
@@ -1,72 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
-
-
-/**
- * Required to support Web Animations `@angular/animation`.
- * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
- **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
-
-/***************************************************************************************************
- * Zone JS is required by Angular itself.
- */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
-
-/**
- * Date, currency, decimal and percent pipes.
- * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
- */
-// import 'intl';  // Run `npm install --save intl`.
-/**
- * Need to import at least one locale-data with intl.
- */
-// import 'intl/locale-data/jsonp/en';
@@ -1,32 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
-declare var __karma__: any;
-declare var require: any;
-
-// Prevent Karma from running prematurely.
-__karma__.loaded = function () {};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
-// Finally, start Karma to run the tests.
-__karma__.start();
@@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "module": "es2015",
-    "baseUrl": "",
-    "types": []
-  },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
-  ]
-}
@@ -1,20 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/spec",
-    "module": "commonjs",
-    "target": "es5",
-    "baseUrl": "",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}
@@ -1,5 +0,0 @@
-/* SystemJS module definition */
-declare var module: NodeModule;
-interface NodeModule {
-  id: string;
-}
@@ -1,20 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "outDir": "./dist/out-tsc",
-    "baseUrl": "src",
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "target": "es5",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2016",
-      "dom"
-    ]
-  }
-}
@@ -5,7 +5,5 @@
    "!**/*.[0-9].*",
    ".angular-cli.json",
    "protractor.conf.js"
-  ],
-  "removeSystemJsConfig": true,
-  "type": "cli"
+  ]
 }
@@ -17,8 +17,8 @@ describe('Component Communication Cookbook Tests', function () {
    let _masterName = 'Master';

    it('should pass properties to children properly', function () {
-      let parent = element.all(by.tagName('hero-parent')).get(0);
-      let heroes = parent.all(by.tagName('hero-child'));
+      let parent = element.all(by.tagName('app-hero-parent')).get(0);
+      let heroes = parent.all(by.tagName('app-hero-child'));

      for (let i = 0; i < _heroNames.length; i++) {
        let childTitle = heroes.get(i).element(by.tagName('h3')).getText();
@@ -37,8 +37,8 @@ describe('Component Communication Cookbook Tests', function () {
    it('should display trimmed, non-empty names', function () {
      let _nonEmptyNameIndex = 0;
      let _nonEmptyName = '"Mr. IQ"';
-      let parent = element.all(by.tagName('name-parent')).get(0);
-      let hero = parent.all(by.tagName('name-child')).get(_nonEmptyNameIndex);
+      let parent = element.all(by.tagName('app-name-parent')).get(0);
+      let hero = parent.all(by.tagName('app-name-child')).get(_nonEmptyNameIndex);

      let displayName = hero.element(by.tagName('h3')).getText();
      expect(displayName).toEqual(_nonEmptyName);
@@ -47,8 +47,8 @@ describe('Component Communication Cookbook Tests', function () {
    it('should replace empty name with default name', function () {
      let _emptyNameIndex = 1;
      let _defaultName = '"<no name set>"';
-      let parent = element.all(by.tagName('name-parent')).get(0);
-      let hero = parent.all(by.tagName('name-child')).get(_emptyNameIndex);
+      let parent = element.all(by.tagName('app-name-parent')).get(0);
+      let hero = parent.all(by.tagName('app-name-child')).get(_emptyNameIndex);

      let displayName = hero.element(by.tagName('h3')).getText();
      expect(displayName).toEqual(_defaultName);
@@ -73,7 +73,7 @@ describe('Component Communication Cookbook Tests', function () {
    });

    it('should set expected values after clicking \'Minor\' twice', function () {
-      let repoTag = element(by.tagName('version-parent'));
+      let repoTag = element(by.tagName('app-version-parent'));
      let newMinorButton = repoTag.all(by.tagName('button')).get(0);

      newMinorButton.click().then(function() {
@@ -91,7 +91,7 @@ describe('Component Communication Cookbook Tests', function () {
    });

    it('should set expected values after clicking \'Major\' once', function () {
-      let repoTag = element(by.tagName('version-parent'));
+      let repoTag = element(by.tagName('app-version-parent'));
      let newMajorButton = repoTag.all(by.tagName('button')).get(1);

      newMajorButton.click().then(function() {
@@ -107,7 +107,7 @@ describe('Component Communication Cookbook Tests', function () {
    });

    function getActual() {
-      let versionTag = element(by.tagName('version-child'));
+      let versionTag = element(by.tagName('app-version-child'));
      let label = versionTag.element(by.tagName('h3')).getText();
      let ul = versionTag.element((by.tagName('ul')));
      let logs = ul.all(by.tagName('li'));
@@ -127,26 +127,26 @@ describe('Component Communication Cookbook Tests', function () {
    // #docregion child-to-parent
    // ...
    it('should not emit the event initially', function () {
-      let voteLabel = element(by.tagName('vote-taker'))
+      let voteLabel = element(by.tagName('app-vote-taker'))
        .element(by.tagName('h3')).getText();
      expect(voteLabel).toBe('Agree: 0, Disagree: 0');
    });

    it('should process Agree vote', function () {
-      let agreeButton1 = element.all(by.tagName('my-voter')).get(0)
+      let agreeButton1 = element.all(by.tagName('app-voter')).get(0)
        .all(by.tagName('button')).get(0);
      agreeButton1.click().then(function() {
-        let voteLabel = element(by.tagName('vote-taker'))
+        let voteLabel = element(by.tagName('app-vote-taker'))
          .element(by.tagName('h3')).getText();
        expect(voteLabel).toBe('Agree: 1, Disagree: 0');
      });
    });

    it('should process Disagree vote', function () {
-      let agreeButton1 = element.all(by.tagName('my-voter')).get(1)
+      let agreeButton1 = element.all(by.tagName('app-voter')).get(1)
        .all(by.tagName('button')).get(1);
      agreeButton1.click().then(function() {
-        let voteLabel = element(by.tagName('vote-taker'))
+        let voteLabel = element(by.tagName('app-vote-taker'))
          .element(by.tagName('h3')).getText();
        expect(voteLabel).toBe('Agree: 1, Disagree: 1');
      });
@@ -170,7 +170,7 @@ describe('Component Communication Cookbook Tests', function () {
    // ...
    it('timer and parent seconds should match', function () {
      let parent = element(by.tagName(parentTag));
-      let message = parent.element(by.tagName('countdown-timer')).getText();
+      let message = parent.element(by.tagName('app-countdown-timer')).getText();
      browser.sleep(10); // give `seconds` a chance to catchup with `message`
      let seconds = parent.element(by.className('seconds')).getText();
      expect(message).toContain(seconds);
@@ -181,7 +181,7 @@ describe('Component Communication Cookbook Tests', function () {
      let stopButton = parent.all(by.tagName('button')).get(1);

      stopButton.click().then(function() {
-        let message = parent.element(by.tagName('countdown-timer')).getText();
+        let message = parent.element(by.tagName('app-countdown-timer')).getText();
        expect(message).toContain('Holding');
      });
    });
@@ -194,7 +194,7 @@ describe('Component Communication Cookbook Tests', function () {
    // #docregion bidirectional-service
    // ...
    it('should announce a mission', function () {
-      let missionControl = element(by.tagName('mission-control'));
+      let missionControl = element(by.tagName('app-mission-control'));
      let announceButton = missionControl.all(by.tagName('button')).get(0);
      announceButton.click().then(function () {
        let history = missionControl.all(by.tagName('li'));
@@ -217,7 +217,7 @@ describe('Component Communication Cookbook Tests', function () {

    function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) {
      let _confirmedLog = ' confirmed the mission';
-      let missionControl = element(by.tagName('mission-control'));
+      let missionControl = element(by.tagName('app-mission-control'));
      let confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
      confirmButton.click().then(function () {
        let history = missionControl.all(by.tagName('li'));
@@ -9,43 +9,43 @@
 <a href="#bidirectional-service">Parent and children communicate via a service ("Mission Control")</a><br/>

 <div id="parent-to-child">
-  <hero-parent></hero-parent>
+  <app-hero-parent></app-hero-parent>
 </div>
 <a href="#top" class="to-top">Back to Top</a>

 <hr>
 <div id="parent-to-child-setter">
-  <name-parent></name-parent>
+  <app-name-parent></app-name-parent>
 </div>
 <a href="#top" class="to-top">Back to Top</a>

 <hr>
 <div id="parent-to-child-on-changes">
-  <version-parent></version-parent>
+  <app-version-parent></app-version-parent>
 </div>
 <a href="#top" class="to-top">Back to Top</a>

 <hr>
 <div id="child-to-parent">
-  <vote-taker></vote-taker>
+  <app-vote-taker></app-vote-taker>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 <hr>

 <div id="parent-to-child-local-var">
-  <countdown-parent-lv></countdown-parent-lv>
+  <app-countdown-parent-lv></app-countdown-parent-lv>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 <hr>

 <div id="parent-to-view-child">
-  <countdown-parent-vc></countdown-parent-vc>
+  <app-countdown-parent-vc></app-countdown-parent-vc>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 <hr>

 <div id="bidirectional-service">
-  <mission-control></mission-control>
+  <app-mission-control></app-mission-control>
 </div>
 <a href="#top" class="to-top">Back to Top</a>
 <hr>
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';

@Component({
-  selector: 'my-app',
+  selector: 'app-root',
  templateUrl: './app.component.html'
 })
 export class AppComponent { }
@@ -5,7 +5,7 @@ import { MissionService } from './mission.service';
 import { Subscription }   from 'rxjs/Subscription';

@Component({
-  selector: 'my-astronaut',
+  selector: 'app-astronaut',
  template: `
    <p>
      {{astronaut}}: <strong>{{mission}}</strong>
@@ -11,15 +11,15 @@ import { CountdownTimerComponent }  from './countdown-timer.component';
 //// Local variable, #timer, version
 // #docregion lv
@Component({
-  selector: 'countdown-parent-lv',
+  selector: 'app-countdown-parent-lv',
  template: `
  <h3>Countdown to Liftoff (via local variable)</h3>
  <button (click)="timer.start()">Start</button>
  <button (click)="timer.stop()">Stop</button>
  <div class="seconds">{{timer.seconds}}</div>
-  <countdown-timer #timer></countdown-timer>
+  <app-countdown-timer #timer></app-countdown-timer>
  `,
-  styleUrls: ['demo.css']
+  styleUrls: ['../assets/demo.css']
 })
 export class CountdownLocalVarParentComponent { }
 // #enddocregion lv
@@ -27,15 +27,15 @@ export class CountdownLocalVarParentComponent { }
 //// View Child version
 // #docregion vc
@Component({
-  selector: 'countdown-parent-vc',
+  selector: 'app-countdown-parent-vc',
  template: `
  <h3>Countdown to Liftoff (via ViewChild)</h3>
  <button (click)="start()">Start</button>
  <button (click)="stop()">Stop</button>
  <div class="seconds">{{ seconds() }}</div>
-  <countdown-timer></countdown-timer>
+  <app-countdown-timer></app-countdown-timer>
  `,
-  styleUrls: ['demo.css']
+  styleUrls: ['../assets/demo.css']
 })
 export class CountdownViewChildParentComponent implements AfterViewInit {

@@ -2,7 +2,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';

@Component({
-  selector: 'countdown-timer',
+  selector: 'app-countdown-timer',
  template: '<p>{{message}}</p>'
 })
 export class CountdownTimerComponent implements OnInit, OnDestroy {
@@ -4,7 +4,7 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';

@Component({
-  selector: 'hero-child',
+  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
@@ -4,13 +4,13 @@ import { Component } from '@angular/core';
 import { HEROES } from './hero';

@Component({
-  selector: 'hero-parent',
+  selector: 'app-hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
-    <hero-child *ngFor="let hero of heroes"
+    <app-hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
-    </hero-child>
+    </app-hero-child>
  `
 })
 export class HeroParentComponent {
@@ -4,13 +4,13 @@ import { Component }          from '@angular/core';
 import { MissionService }     from './mission.service';

@Component({
-  selector: 'mission-control',
+  selector: 'app-mission-control',
  template: `
    <h2>Mission Control</h2>
    <button (click)="announce()">Announce mission</button>
-    <my-astronaut *ngFor="let astronaut of astronauts"
+    <app-astronaut *ngFor="let astronaut of astronauts"
      [astronaut]="astronaut">
-    </my-astronaut>
+    </app-astronaut>
    <h3>History</h3>
    <ul>
      <li *ngFor="let event of history">{{event}}</li>
@@ -2,7 +2,7 @@
 import { Component, Input } from '@angular/core';

@Component({
-  selector: 'name-child',
+  selector: 'app-name-child',
  template: '<h3>"{{name}}"</h3>'
 })
 export class NameChildComponent {
@@ -2,10 +2,10 @@
 import { Component } from '@angular/core';

@Component({
-  selector: 'name-parent',
+  selector: 'app-name-parent',
  template: `
  <h2>Master controls {{names.length}} names</h2>
-  <name-child *ngFor="let name of names" [name]="name"></name-child>
+  <app-name-child *ngFor="let name of names" [name]="name"></app-name-child>
  `
 })
 export class NameParentComponent {
@@ -3,7 +3,7 @@
 import { Component, Input, OnChanges, SimpleChange } from '@angular/core';

@Component({
-  selector: 'version-child',
+  selector: 'app-version-child',
  template: `
    <h3>Version {{major}}.{{minor}}</h3>
    <h4>Change log:</h4>
@@ -2,12 +2,12 @@
 import { Component } from '@angular/core';

@Component({
-  selector: 'version-parent',
+  selector: 'app-version-parent',
  template: `
    <h2>Source code version</h2>
    <button (click)="newMinor()">New minor version</button>
    <button (click)="newMajor()">New major version</button>
-    <version-child [major]="major" [minor]="minor"></version-child>
+    <app-version-child [major]="major" [minor]="minor"></app-version-child>
  `
 })
 export class VersionParentComponent {
@@ -2,7 +2,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
-  selector: 'my-voter',
+  selector: 'app-voter',
  template: `
    <h4>{{name}}</h4>
    <button (click)="vote(true)"  [disabled]="voted">Agree</button>
@@ -2,14 +2,14 @@
 import { Component }      from '@angular/core';

@Component({
-  selector: 'vote-taker',
+  selector: 'app-vote-taker',
  template: `
    <h2>Should mankind colonize the Universe?</h2>
    <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
-    <my-voter *ngFor="let voter of voters"
+    <app-voter *ngFor="let voter of voters"
      [name]="voter"
      (onVoted)="onVoted($event)">
-    </my-voter>
+    </app-voter>
  `
 })
 export class VoteTakerComponent {
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Passing information from parent to child</title>
@@ -7,23 +7,10 @@
    <style>
      .to-top {margin-top: 8px; display: block;}
    </style>
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="demo.css">
-
-    <!-- Polyfills -->
-    <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/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
  </head>

  <body>
-    <my-app>loading...</my-app>
+    <app-root></app-root>
  </body>

 </html>
@@ -1,5 +1,11 @@
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}

 platformBrowserDynamic().bootstrapModule(AppModule);
@@ -9,7 +9,7 @@ describe('Component Style Tests', function () {
  });

  it('scopes component styles to component view', function() {
-    let componentH1 = element(by.css('hero-app > h1'));
+    let componentH1 = element(by.css('app-root > h1'));
    let externalH1 = element(by.css('body > h1'));

    expect(componentH1.getCssValue('fontWeight')).toEqual('normal');
@@ -18,47 +18,47 @@ describe('Component Style Tests', function () {


  it('allows styling :host element', function() {
-    let host = element(by.css('hero-details'));
+    let host = element(by.css('app-hero-details'));

    expect(host.getCssValue('borderWidth')).toEqual('1px');
  });

  it('supports :host() in function form', function() {
-    let host = element(by.css('hero-details'));
+    let host = element(by.css('app-hero-details'));

    host.element(by.buttonText('Activate')).click();
    expect(host.getCssValue('borderWidth')).toEqual('3px');
  });

  it('allows conditional :host-context() styling', function() {
-    let h2 = element(by.css('hero-details h2'));
+    let h2 = element(by.css('app-hero-details h2'));

    expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff
  });

  it('styles both view and content children with /deep/', function() {
-    let viewH3 = element(by.css('hero-team h3'));
-    let contentH3 = element(by.css('hero-controls h3'));
+    let viewH3 = element(by.css('app-hero-team h3'));
+    let contentH3 = element(by.css('app-hero-controls h3'));

    expect(viewH3.getCssValue('fontStyle')).toEqual('italic');
    expect(contentH3.getCssValue('fontStyle')).toEqual('italic');
  });

  it('includes styles loaded with CSS @import', function() {
-    let host = element(by.css('hero-details'));
+    let host = element(by.css('app-hero-details'));

    expect(host.getCssValue('padding')).toEqual('10px');
  });

  it('processes template inline styles', function() {
-    let button = element(by.css('hero-controls button'));
+    let button = element(by.css('app-hero-controls button'));
    let externalButton = element(by.css('body > button'));
    expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
    expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)');
  });

  it('processes template <link>s', function() {
-    let li = element(by.css('hero-team li:first-child'));
+    let li = element(by.css('app-hero-team li:first-child'));
    let externalLi = element(by.css('body > ul li'));

    expect(li.getCssValue('listStyleType')).toEqual('square');
@@ -3,12 +3,12 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';

@Component({
-  selector: 'hero-app-main',
+  selector: 'app-hero-main',
  template: `
-    <quest-summary></quest-summary>
-    <hero-details [hero]=hero [class.active]=hero.active>
-      <hero-controls [hero]=hero></hero-controls>
-    </hero-details>
+    <app-quest-summary></app-quest-summary>
+    <app-hero-details [hero]="hero" [class.active]="hero.active">
+      <app-hero-controls [hero]="hero"></app-hero-controls>
+    </app-hero-details>
  `
 })
 export class HeroAppMainComponent {
@@ -3,10 +3,10 @@ import { Hero } from './hero';

 // #docregion
@Component({
-  selector: 'hero-app',
+  selector: 'app-root',
  template: `
    <h1>Tour of Heroes</h1>
-    <hero-app-main [hero]=hero></hero-app-main>`,
+    <app-hero-main [hero]=hero></app-hero-main>`,
  styles: ['h1 { font-weight: normal; }']
 })
 export class HeroAppComponent {
@@ -3,7 +3,7 @@ import { Hero } from './hero';

 // #docregion inlinestyles
@Component({
-  selector: 'hero-controls',
+  selector: 'app-hero-controls',
  template: `
    <style>
      button {
@@ -3,13 +3,13 @@ import { Hero } from './hero';

 // #docregion styleurls
@Component({
-  selector: 'hero-details',
+  selector: 'app-hero-details',
  template: `
    <h2>{{hero.name}}</h2>
-    <hero-team [hero]=hero></hero-team>
+    <app-hero-team [hero]=hero></app-hero-team>
    <ng-content></ng-content>
  `,
-  styleUrls: ['app/hero-details.component.css']
+  styleUrls: ['./hero-details.component.css']
 })
 export class HeroDetailsComponent {
  // #enddocregion styleurls
@@ -3,9 +3,9 @@ import { Hero } from './hero';

 // #docregion stylelink
@Component({
-  selector: 'hero-team',
+  selector: 'app-hero-team',
  template: `
-    <link rel="stylesheet" href="app/hero-team.component.css">
+    <link rel="stylesheet" href="assets/hero-team.component.css">
    <h3>Team</h3>
    <ul>
      <li *ngFor="let member of hero.team">
@@ -4,7 +4,7 @@ import { Component, ViewEncapsulation } from '@angular/core';

 // #docregion
@Component({
-  selector: 'quest-summary',
+  selector: 'app-quest-summary',
  // #docregion urls
  templateUrl: './quest-summary.component.html',
  styleUrls:  ['./quest-summary.component.css']
@@ -1,27 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Component Styles</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- Polyfills -->
-    <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/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
  </head>

  <body>
    <h1 style="visibility: hidden;">External H1 Title for E2E test</h1>
-    <hero-app></hero-app>
+    <app-root></app-root>
    <button style="visibility: hidden;">External button for E2E test</button>
    <ul style="visibility: hidden;">
      <li>External list for E2E test</li>
@@ -1,5 +1,12 @@
 // #docregion
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}

 platformBrowserDynamic().bootstrapModule(AppModule);
@@ -69,7 +69,7 @@ describe('Dependency Injection Cookbook', function () {
    });

    it('should highlight Hero Bios and Contacts container when mouseover', function () {
-      let target = element(by.css('div[myHighlight="yellow"]'));
+      let target = element(by.css('div[appHighlight="yellow"]'));
      let yellow = 'rgba(255, 255, 0, 1)';

      expect(target.getCssValue('background-color')).not.toEqual(yellow);
@@ -7,32 +7,32 @@

 <div class="di-component">
  <h3>Hero Bios</h3>
-  <hero-bios></hero-bios>
+  <app-hero-bios></app-hero-bios>
 </div>

 <!-- #docregion highlight -->
-<div id="highlight"  class="di-component"  myHighlight>
+<div id="highlight"  class="di-component"  appHighlight>
  <h3>Hero Bios and Contacts</h3>
-  <div myHighlight="yellow">
-    <hero-bios-and-contacts></hero-bios-and-contacts>
+  <div appHighlight="yellow">
+    <app-hero-bios-and-contacts></app-hero-bios-and-contacts>
  </div>
 </div>
 <!-- #enddocregion highlight -->

 <div class="di-component">
-  <hero-of-the-month></hero-of-the-month>
+  <app-hero-of-the-month></app-hero-of-the-month>
 </div>

 <div class="di-component">
  <h3>Unsorted Heroes</h3>
-  <unsorted-heroes></unsorted-heroes>
+  <app-unsorted-heroes></app-unsorted-heroes>
 </div>

 <div class="di-component">
  <h3>Sorted Heroes</h3>
-  <sorted-heroes></sorted-heroes>
+  <app-sorted-heroes></app-sorted-heroes>
 </div>

 <div class="di-component">
-  <parent-finder></parent-finder>
+  <app-parent-finder></app-parent-finder>
 </div>
@@ -7,7 +7,7 @@ import { UserContextService } from './user-context.service';
 import { UserService }        from './user.service';

@Component({
-  selector: 'my-app',
+  selector: 'app-root',
  templateUrl: './app.component.html',
 // #docregion providers
  providers: [ LoggerService, UserContextService, UserService ]
@@ -5,7 +5,7 @@ import { HeroCacheService }         from './hero-cache.service';

 // #docregion component
@Component({
-  selector: 'hero-bio',
+  selector: 'app-hero-bio',
  // #docregion template
  template: `
    <h4>{{hero.name}}</h4>
@@ -8,11 +8,11 @@ import { LoggerService }        from './logger.service';
 //////// HeroBiosComponent ////
 // #docregion simple
@Component({
-  selector: 'hero-bios',
+  selector: 'app-hero-bios',
  template: `
-    <hero-bio [heroId]="1"></hero-bio>
-    <hero-bio [heroId]="2"></hero-bio>
-    <hero-bio [heroId]="3"></hero-bio>`,
+    <app-hero-bio [heroId]="1"></app-hero-bio>
+    <app-hero-bio [heroId]="2"></app-hero-bio>
+    <app-hero-bio [heroId]="3"></app-hero-bio>`,
  providers: [HeroService]
 })
 export class HeroBiosComponent {
@@ -29,12 +29,12 @@ export class HeroBiosComponent {
 //////// HeroBiosAndContactsComponent ////
 // #docregion hero-bios-and-contacts
@Component({
-  selector: 'hero-bios-and-contacts',
+  selector: 'app-hero-bios-and-contacts',
  // #docregion template
  template: `
-    <hero-bio [heroId]="1"> <hero-contact></hero-contact> </hero-bio>
-    <hero-bio [heroId]="2"> <hero-contact></hero-contact> </hero-bio>
-    <hero-bio [heroId]="3"> <hero-contact></hero-contact> </hero-bio>`,
+    <app-hero-bio [heroId]="1"> <app-hero-contact></app-hero-contact> </app-hero-bio>
+    <app-hero-bio [heroId]="2"> <app-hero-contact></app-hero-contact> </app-hero-bio>
+    <app-hero-bio [heroId]="3"> <app-hero-contact></app-hero-contact> </app-hero-bio>`,
  // #enddocregion template
  // #docregion class-provider
  providers: [HeroService]
@@ -7,7 +7,7 @@ import { LoggerService }    from './logger.service';

 // #docregion component
@Component({
-  selector: 'hero-contact',
+  selector: 'app-hero-contact',
  template: `
  <div>Phone #: {{phoneNumber}}
  <span *ngIf="hasLogger">!!!</span></div>`
@@ -6,7 +6,7 @@ import { MinimalLogger }       from './minimal-logger.service';

 // #docregion
@Component({
-  selector: 'hero-of-the-month',
+  selector: 'app-hero-of-the-month',
  templateUrl: './hero-of-the-month.component.html',
  // Todo: move this aliasing, `useExisting` provider to the AppModule
  providers: [{ provide: MinimalLogger, useExisting: LoggerService }]
@@ -24,7 +24,7 @@ const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555');

 // #docregion hero-of-the-month
@Component({
-  selector: 'hero-of-the-month',
+  selector: 'app-hero-of-the-month',
  templateUrl: './hero-of-the-month.component.html',
  providers: [
    // #docregion use-value
--- a/Show More
+++ b/Show More