diff --git a/aio/content/examples/.gitignore b/aio/content/examples/.gitignore
index 7833b847ed4..5a298caef96 100644
--- a/aio/content/examples/.gitignore
+++ b/aio/content/examples/.gitignore
@@ -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
diff --git a/aio/content/examples/ajs-quick-reference/e2e-spec.ts b/aio/content/examples/ajs-quick-reference/e2e/app.e2e-spec.ts
similarity index 94%
rename from aio/content/examples/ajs-quick-reference/e2e-spec.ts
rename to aio/content/examples/ajs-quick-reference/e2e/app.e2e-spec.ts
index 81a5faa5e75..e27f56e68b8 100644
--- a/aio/content/examples/ajs-quick-reference/e2e-spec.ts
+++ b/aio/content/examples/ajs-quick-reference/e2e/app.e2e-spec.ts
@@ -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'));
diff --git a/aio/content/examples/ajs-quick-reference/src/app/app.component.ts b/aio/content/examples/ajs-quick-reference/src/app/app.component.ts
index 91091026adf..6c5de8624e4 100644
--- a/aio/content/examples/ajs-quick-reference/src/app/app.component.ts
+++ b/aio/content/examples/ajs-quick-reference/src/app/app.component.ts
@@ -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 ]
diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
index fa71f7a7abd..9955550c8d1 100644
--- a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.ts
@@ -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' ],
diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie.service.ts b/aio/content/examples/ajs-quick-reference/src/app/movie.service.ts
index 404fd4454ce..887774d5706 100644
--- a/aio/content/examples/ajs-quick-reference/src/app/movie.service.ts
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie.service.ts
@@ -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',
diff --git a/aio/content/examples/ajs-quick-reference/src/images/hero.png b/aio/content/examples/ajs-quick-reference/src/assets/images/hero.png
similarity index 100%
rename from aio/content/examples/ajs-quick-reference/src/images/hero.png
rename to aio/content/examples/ajs-quick-reference/src/assets/images/hero.png
diff --git a/aio/content/examples/ajs-quick-reference/src/images/ng-logo.png b/aio/content/examples/ajs-quick-reference/src/assets/images/ng-logo.png
similarity index 100%
rename from aio/content/examples/ajs-quick-reference/src/images/ng-logo.png
rename to aio/content/examples/ajs-quick-reference/src/assets/images/ng-logo.png
diff --git a/aio/content/examples/ajs-quick-reference/src/images/villain.png b/aio/content/examples/ajs-quick-reference/src/assets/images/villain.png
similarity index 100%
rename from aio/content/examples/ajs-quick-reference/src/images/villain.png
rename to aio/content/examples/ajs-quick-reference/src/assets/images/villain.png
diff --git a/aio/content/examples/ajs-quick-reference/src/index.html b/aio/content/examples/ajs-quick-reference/src/index.html
index 829f080ae33..9f786cb6aa9 100644
--- a/aio/content/examples/ajs-quick-reference/src/index.html
+++ b/aio/content/examples/ajs-quick-reference/src/index.html
@@ -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>
diff --git a/aio/content/examples/ajs-quick-reference/src/main.ts b/aio/content/examples/ajs-quick-reference/src/main.ts
index 6b6532d428a..0740658908d 100644
--- a/aio/content/examples/ajs-quick-reference/src/main.ts
+++ b/aio/content/examples/ajs-quick-reference/src/main.ts
@@ -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);
diff --git a/aio/content/examples/animations/e2e-spec.ts b/aio/content/examples/animations/e2e/app.e2e-spec.ts
similarity index 92%
rename from aio/content/examples/animations/e2e-spec.ts
rename to aio/content/examples/animations/e2e/app.e2e-spec.ts
index 4fba7ec4755..fc0f40f9fc4 100644
--- a/aio/content/examples/animations/e2e-spec.ts
+++ b/aio/content/examples/animations/e2e/app.e2e-spec.ts
@@ -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', () => {
diff --git a/aio/content/examples/animations/src/app/hero-list-auto.component.ts b/aio/content/examples/animations/src/app/hero-list-auto.component.ts
index 6c9b70ff4d0..97a5ff99dec 100644
--- a/aio/content/examples/animations/src/app/hero-list-auto.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-auto.component.ts
@@ -13,7 +13,7 @@ import {
 import { Hero } from './hero.service';
 
 @Component({
-  selector: 'hero-list-auto',
+  selector: 'app-hero-list-auto',
   // #docregion template
   template: `
     <ul>
diff --git a/aio/content/examples/animations/src/app/hero-list-basic.component.ts b/aio/content/examples/animations/src/app/hero-list-basic.component.ts
index f3a5856d9de..ce23628d6f0 100644
--- a/aio/content/examples/animations/src/app/hero-list-basic.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-basic.component.ts
@@ -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
diff --git a/aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts b/aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts
index cfac09b8259..2811254c815 100644
--- a/aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-combined-transitions.component.ts
@@ -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>
diff --git a/aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts b/aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts
index 1b5b1000f45..291234dab9a 100644
--- a/aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-enter-leave-states.component.ts
@@ -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>
diff --git a/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts b/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
index 3eed1568731..0a888698c31 100644
--- a/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
@@ -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>
diff --git a/aio/content/examples/animations/src/app/hero-list-groups.component.ts b/aio/content/examples/animations/src/app/hero-list-groups.component.ts
index 34fd8c207f2..d17b47d213d 100644
--- a/aio/content/examples/animations/src/app/hero-list-groups.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-groups.component.ts
@@ -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"
diff --git a/aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts b/aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts
index 8dab15c3866..43fe2b7ce30 100644
--- a/aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-inline-styles.component.ts
@@ -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>
diff --git a/aio/content/examples/animations/src/app/hero-list-multistep.component.ts b/aio/content/examples/animations/src/app/hero-list-multistep.component.ts
index f3aad073ab5..7e77bff1a46 100644
--- a/aio/content/examples/animations/src/app/hero-list-multistep.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-multistep.component.ts
@@ -15,7 +15,7 @@ import {
 import { Hero } from './hero.service';
 
 @Component({
-  selector: 'hero-list-multistep',
+  selector: 'app-hero-list-multistep',
   // #docregion template
   template: `
     <ul>
diff --git a/aio/content/examples/animations/src/app/hero-list-timings.component.ts b/aio/content/examples/animations/src/app/hero-list-timings.component.ts
index 305cf784877..b410c22cb93 100644
--- a/aio/content/examples/animations/src/app/hero-list-timings.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-timings.component.ts
@@ -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"
diff --git a/aio/content/examples/animations/src/app/hero-list-twoway.component.ts b/aio/content/examples/animations/src/app/hero-list-twoway.component.ts
index 87e0109c7d9..ef0be5fce7e 100644
--- a/aio/content/examples/animations/src/app/hero-list-twoway.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-twoway.component.ts
@@ -16,7 +16,7 @@ import {
 import { Hero } from './hero.service';
 
 @Component({
- selector: 'hero-list-twoway',
+ selector: 'app-hero-list-twoway',
  // #docregion template
  template: `
    <ul>
diff --git a/aio/content/examples/animations/src/app/hero-team-builder.component.ts b/aio/content/examples/animations/src/app/hero-team-builder.component.ts
index a46c41dcf07..8a1904ea4f6 100644
--- a/aio/content/examples/animations/src/app/hero-team-builder.component.ts
+++ b/aio/content/examples/animations/src/app/hero-team-builder.component.ts
@@ -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>
   `,
diff --git a/aio/content/examples/animations/src/index.html b/aio/content/examples/animations/src/index.html
index 74a397e7d15..766957f2343 100644
--- a/aio/content/examples/animations/src/index.html
+++ b/aio/content/examples/animations/src/index.html
@@ -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>
diff --git a/aio/content/examples/animations/src/main.ts b/aio/content/examples/animations/src/main.ts
index f22933ba8ed..a9ca1caf8ce 100644
--- a/aio/content/examples/animations/src/main.ts
+++ b/aio/content/examples/animations/src/main.ts
@@ -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);
diff --git a/aio/content/examples/aot-compiler/example-config.json b/aio/content/examples/aot-compiler/example-config.json
index 473b80a5729..1bbaaad5301 100644
--- a/aio/content/examples/aot-compiler/example-config.json
+++ b/aio/content/examples/aot-compiler/example-config.json
@@ -1,3 +1,4 @@
 {
-  "build": "build:aot"
+  "build": "build:aot",
+  "projectType": "systemjs"
 }
diff --git a/aio/content/examples/aot-compiler/src/index-jit.html b/aio/content/examples/aot-compiler/src/index-jit.html
index 713a04970e1..db41485320e 100644
--- a/aio/content/examples/aot-compiler/src/index-jit.html
+++ b/aio/content/examples/aot-compiler/src/index-jit.html
@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Ahead of time compilation (JIT)</title>
     <base href="/">
diff --git a/aio/content/examples/aot-compiler/src/index.html b/aio/content/examples/aot-compiler/src/index.html
index 09e5f0de0ed..c79a60dd1b6 100644
--- a/aio/content/examples/aot-compiler/src/index.html
+++ b/aio/content/examples/aot-compiler/src/index.html
@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Ahead of time compilation</title>
     <base href="/">
diff --git a/aio/content/examples/architecture/e2e-spec.ts b/aio/content/examples/architecture/e2e/app.e2e-spec.ts
similarity index 91%
rename from aio/content/examples/architecture/e2e-spec.ts
rename to aio/content/examples/architecture/e2e/app.e2e-spec.ts
index a5aa78f4fce..8ad5c9ab741 100644
--- a/aio/content/examples/architecture/e2e-spec.ts
+++ b/aio/content/examples/architecture/e2e/app.e2e-spec.ts
@@ -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'))
   };
 }
 
diff --git a/aio/content/examples/architecture/src/app/app.component.ts b/aio/content/examples/architecture/src/app/app.component.ts
index b987f17e446..b250b678a20 100644
--- a/aio/content/examples/architecture/src/app/app.component.ts
+++ b/aio/content/examples/architecture/src/app/app.component.ts
@@ -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
diff --git a/aio/content/examples/architecture/src/app/hero-detail.component.ts b/aio/content/examples/architecture/src/app/hero-detail.component.ts
index b75d6dd225a..349c118bf1d 100644
--- a/aio/content/examples/architecture/src/app/hero-detail.component.ts
+++ b/aio/content/examples/architecture/src/app/hero-detail.component.ts
@@ -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 {
diff --git a/aio/content/examples/architecture/src/app/hero-list.component.1.html b/aio/content/examples/architecture/src/app/hero-list.component.1.html
index c6e6dd51337..9533a287bc7 100644
--- a/aio/content/examples/architecture/src/app/hero-list.component.1.html
+++ b/aio/content/examples/architecture/src/app/hero-list.component.1.html
@@ -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>
diff --git a/aio/content/examples/architecture/src/app/hero-list.component.html b/aio/content/examples/architecture/src/app/hero-list.component.html
index b46a307bd37..8f0433fe54b 100644
--- a/aio/content/examples/architecture/src/app/hero-list.component.html
+++ b/aio/content/examples/architecture/src/app/hero-list.component.html
@@ -8,4 +8,4 @@
   </li>
 </ul>
 
-<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>
+<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>
diff --git a/aio/content/examples/architecture/src/app/hero-list.component.ts b/aio/content/examples/architecture/src/app/hero-list.component.ts
index a3d372f00ba..4dc0b8e2f34 100644
--- a/aio/content/examples/architecture/src/app/hero-list.component.ts
+++ b/aio/content/examples/architecture/src/app/hero-list.component.ts
@@ -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 ]
 })
diff --git a/aio/content/examples/architecture/src/app/sales-tax.component.ts b/aio/content/examples/architecture/src/app/sales-tax.component.ts
index 02201afe05e..bc92a8209e6 100644
--- a/aio/content/examples/architecture/src/app/sales-tax.component.ts
+++ b/aio/content/examples/architecture/src/app/sales-tax.component.ts
@@ -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">
diff --git a/aio/content/examples/architecture/src/index.html b/aio/content/examples/architecture/src/index.html
index 9aadf6e1091..93ea2e27dcc 100644
--- a/aio/content/examples/architecture/src/index.html
+++ b/aio/content/examples/architecture/src/index.html
@@ -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>
diff --git a/aio/content/examples/architecture/src/main.ts b/aio/content/examples/architecture/src/main.ts
index 6b6532d428a..0740658908d 100644
--- a/aio/content/examples/architecture/src/main.ts
+++ b/aio/content/examples/architecture/src/main.ts
@@ -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);
diff --git a/aio/content/examples/attribute-directives/e2e-spec.ts b/aio/content/examples/attribute-directives/e2e/app.e2e-spec.ts
similarity index 100%
rename from aio/content/examples/attribute-directives/e2e-spec.ts
rename to aio/content/examples/attribute-directives/e2e/app.e2e-spec.ts
diff --git a/aio/content/examples/attribute-directives/src/app/app.component.1.html b/aio/content/examples/attribute-directives/src/app/app.component.1.html
index 9505bc9dffd..cb25e1dec7a 100644
--- a/aio/content/examples/attribute-directives/src/app/app.component.1.html
+++ b/aio/content/examples/attribute-directives/src/app/app.component.1.html
@@ -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 -->
diff --git a/aio/content/examples/attribute-directives/src/app/app.component.1.ts b/aio/content/examples/attribute-directives/src/app/app.component.1.ts
index d9b98ef3fde..7924a2366ab 100644
--- a/aio/content/examples/attribute-directives/src/app/app.component.1.ts
+++ b/aio/content/examples/attribute-directives/src/app/app.component.1.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.1.html'
 })
 // #docregion class
diff --git a/aio/content/examples/attribute-directives/src/app/app.component.html b/aio/content/examples/attribute-directives/src/app/app.component.html
index 3adb52bc1e1..c361f112871 100644
--- a/aio/content/examples/attribute-directives/src/app/app.component.html
+++ b/aio/content/examples/attribute-directives/src/app/app.component.html
@@ -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>
diff --git a/aio/content/examples/attribute-directives/src/app/app.component.ts b/aio/content/examples/attribute-directives/src/app/app.component.ts
index 693918d8d6d..01d0dd5b5f1 100644
--- a/aio/content/examples/attribute-directives/src/app/app.component.ts
+++ b/aio/content/examples/attribute-directives/src/app/app.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 // #docregion class
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts
index 4cacc0d22eb..bc9d1ac6e1f 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts
@@ -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';
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
index 6778e7e46c5..15765ca481f 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts
@@ -4,7 +4,7 @@
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
-  selector: '[myHighlight]'
+  selector: '[appHighlight]'
 })
 export class HighlightDirective {
   // #docregion ctor
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
index bf76769c936..c0892fa3812 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts
@@ -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() {
diff --git a/aio/content/examples/attribute-directives/src/app/highlight.directive.ts b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
index 2269cbbe39e..a5a1eb7d898 100644
--- a/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
+++ b/aio/content/examples/attribute-directives/src/app/highlight.directive.ts
@@ -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
diff --git a/aio/content/examples/attribute-directives/src/index.html b/aio/content/examples/attribute-directives/src/index.html
index 97662437f00..12cabb63626 100644
--- a/aio/content/examples/attribute-directives/src/index.html
+++ b/aio/content/examples/attribute-directives/src/index.html
@@ -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>
diff --git a/aio/content/examples/attribute-directives/src/main.ts b/aio/content/examples/attribute-directives/src/main.ts
index 6b6532d428a..0740658908d 100644
--- a/aio/content/examples/attribute-directives/src/main.ts
+++ b/aio/content/examples/attribute-directives/src/main.ts
@@ -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);
diff --git a/aio/content/examples/cli-quickstart/e2e-spec.ts b/aio/content/examples/cli-quickstart/e2e-spec.ts
deleted file mode 100644
index 3f0760b56e5..00000000000
--- a/aio/content/examples/cli-quickstart/e2e-spec.ts
+++ /dev/null
@@ -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!!');
-  });
-});
diff --git a/aio/content/examples/cli-quickstart/e2e/app.e2e-spec.ts b/aio/content/examples/cli-quickstart/e2e/app.e2e-spec.ts
index eea51018bd9..3f0760b56e5 100644
--- a/aio/content/examples/cli-quickstart/e2e/app.e2e-spec.ts
+++ b/aio/content/examples/cli-quickstart/e2e/app.e2e-spec.ts
@@ -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!!');
   });
 });
diff --git a/aio/content/examples/cli-quickstart/zipper.json b/aio/content/examples/cli-quickstart/zipper.json
index 70bf41659e4..7e4bda5d9f9 100644
--- a/aio/content/examples/cli-quickstart/zipper.json
+++ b/aio/content/examples/cli-quickstart/zipper.json
@@ -5,7 +5,5 @@
     "!**/*.[0-9].*",
     ".angular-cli.json",
     "protractor.conf.js"
-  ],
-  "removeSystemJsConfig": true,
-  "type": "cli"
+  ]
 }
diff --git a/aio/content/examples/component-interaction/e2e-spec.ts b/aio/content/examples/component-interaction/e2e/app.e2e-spec.ts
similarity index 84%
rename from aio/content/examples/component-interaction/e2e-spec.ts
rename to aio/content/examples/component-interaction/e2e/app.e2e-spec.ts
index d78e0784d9d..7637a6affc3 100644
--- a/aio/content/examples/component-interaction/e2e-spec.ts
+++ b/aio/content/examples/component-interaction/e2e/app.e2e-spec.ts
@@ -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'));
diff --git a/aio/content/examples/component-interaction/src/app/app.component.html b/aio/content/examples/component-interaction/src/app/app.component.html
index ef94020efbf..907e0181fa6 100644
--- a/aio/content/examples/component-interaction/src/app/app.component.html
+++ b/aio/content/examples/component-interaction/src/app/app.component.html
@@ -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>
diff --git a/aio/content/examples/component-interaction/src/app/app.component.ts b/aio/content/examples/component-interaction/src/app/app.component.ts
index 7556beb1ff0..968036cb8c2 100644
--- a/aio/content/examples/component-interaction/src/app/app.component.ts
+++ b/aio/content/examples/component-interaction/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent { }
diff --git a/aio/content/examples/component-interaction/src/app/astronaut.component.ts b/aio/content/examples/component-interaction/src/app/astronaut.component.ts
index bc24964f860..b12497fee46 100644
--- a/aio/content/examples/component-interaction/src/app/astronaut.component.ts
+++ b/aio/content/examples/component-interaction/src/app/astronaut.component.ts
@@ -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>
diff --git a/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts b/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts
index 5bcf0645c9c..9f4e5bd4dfd 100644
--- a/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts
+++ b/aio/content/examples/component-interaction/src/app/countdown-parent.component.ts
@@ -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 {
 
diff --git a/aio/content/examples/component-interaction/src/app/countdown-timer.component.ts b/aio/content/examples/component-interaction/src/app/countdown-timer.component.ts
index a9a1a2fa7ce..dcc88334d02 100644
--- a/aio/content/examples/component-interaction/src/app/countdown-timer.component.ts
+++ b/aio/content/examples/component-interaction/src/app/countdown-timer.component.ts
@@ -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 {
diff --git a/aio/content/examples/component-interaction/src/app/hero-child.component.ts b/aio/content/examples/component-interaction/src/app/hero-child.component.ts
index 7447542a742..4a0b8d4229f 100644
--- a/aio/content/examples/component-interaction/src/app/hero-child.component.ts
+++ b/aio/content/examples/component-interaction/src/app/hero-child.component.ts
@@ -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>
diff --git a/aio/content/examples/component-interaction/src/app/hero-parent.component.ts b/aio/content/examples/component-interaction/src/app/hero-parent.component.ts
index 19ceda7bac0..949c649c82f 100644
--- a/aio/content/examples/component-interaction/src/app/hero-parent.component.ts
+++ b/aio/content/examples/component-interaction/src/app/hero-parent.component.ts
@@ -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 {
diff --git a/aio/content/examples/component-interaction/src/app/missioncontrol.component.ts b/aio/content/examples/component-interaction/src/app/missioncontrol.component.ts
index a27e9b16b14..4c1f539b594 100644
--- a/aio/content/examples/component-interaction/src/app/missioncontrol.component.ts
+++ b/aio/content/examples/component-interaction/src/app/missioncontrol.component.ts
@@ -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>
diff --git a/aio/content/examples/component-interaction/src/app/name-child.component.ts b/aio/content/examples/component-interaction/src/app/name-child.component.ts
index bc6d3c6f595..8393e21ebdf 100644
--- a/aio/content/examples/component-interaction/src/app/name-child.component.ts
+++ b/aio/content/examples/component-interaction/src/app/name-child.component.ts
@@ -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 {
diff --git a/aio/content/examples/component-interaction/src/app/name-parent.component.ts b/aio/content/examples/component-interaction/src/app/name-parent.component.ts
index 99753303aa6..2c8c23b7812 100644
--- a/aio/content/examples/component-interaction/src/app/name-parent.component.ts
+++ b/aio/content/examples/component-interaction/src/app/name-parent.component.ts
@@ -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 {
diff --git a/aio/content/examples/component-interaction/src/app/version-child.component.ts b/aio/content/examples/component-interaction/src/app/version-child.component.ts
index 89d365cf9f5..1f3da880f4d 100644
--- a/aio/content/examples/component-interaction/src/app/version-child.component.ts
+++ b/aio/content/examples/component-interaction/src/app/version-child.component.ts
@@ -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>
diff --git a/aio/content/examples/component-interaction/src/app/version-parent.component.ts b/aio/content/examples/component-interaction/src/app/version-parent.component.ts
index 5a8d904c727..0e9476b3c6d 100644
--- a/aio/content/examples/component-interaction/src/app/version-parent.component.ts
+++ b/aio/content/examples/component-interaction/src/app/version-parent.component.ts
@@ -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 {
diff --git a/aio/content/examples/component-interaction/src/app/voter.component.ts b/aio/content/examples/component-interaction/src/app/voter.component.ts
index c0cb23abc05..9583e744663 100644
--- a/aio/content/examples/component-interaction/src/app/voter.component.ts
+++ b/aio/content/examples/component-interaction/src/app/voter.component.ts
@@ -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>
diff --git a/aio/content/examples/component-interaction/src/app/votetaker.component.ts b/aio/content/examples/component-interaction/src/app/votetaker.component.ts
index 87f06161f5c..564cb93261a 100644
--- a/aio/content/examples/component-interaction/src/app/votetaker.component.ts
+++ b/aio/content/examples/component-interaction/src/app/votetaker.component.ts
@@ -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 {
diff --git a/aio/content/examples/component-interaction/src/demo.css b/aio/content/examples/component-interaction/src/assets/demo.css
similarity index 100%
rename from aio/content/examples/component-interaction/src/demo.css
rename to aio/content/examples/component-interaction/src/assets/demo.css
diff --git a/aio/content/examples/component-interaction/src/index.html b/aio/content/examples/component-interaction/src/index.html
index 64c8a3430fa..cb5f519b8c6 100644
--- a/aio/content/examples/component-interaction/src/index.html
+++ b/aio/content/examples/component-interaction/src/index.html
@@ -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>
diff --git a/aio/content/examples/component-interaction/src/main.ts b/aio/content/examples/component-interaction/src/main.ts
index 311c44b76de..a9ca1caf8ce 100644
--- a/aio/content/examples/component-interaction/src/main.ts
+++ b/aio/content/examples/component-interaction/src/main.ts
@@ -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);
diff --git a/aio/content/examples/component-styles/e2e-spec.ts b/aio/content/examples/component-styles/e2e/app.e2e-spec.ts
similarity index 78%
rename from aio/content/examples/component-styles/e2e-spec.ts
rename to aio/content/examples/component-styles/e2e/app.e2e-spec.ts
index 32bd30832c7..943d5922716 100644
--- a/aio/content/examples/component-styles/e2e-spec.ts
+++ b/aio/content/examples/component-styles/e2e/app.e2e-spec.ts
@@ -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');
diff --git a/aio/content/examples/component-styles/src/app/hero-app-main.component.ts b/aio/content/examples/component-styles/src/app/hero-app-main.component.ts
index aebb1f729e6..efecea0b42c 100644
--- a/aio/content/examples/component-styles/src/app/hero-app-main.component.ts
+++ b/aio/content/examples/component-styles/src/app/hero-app-main.component.ts
@@ -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 {
diff --git a/aio/content/examples/component-styles/src/app/hero-app.component.ts b/aio/content/examples/component-styles/src/app/hero-app.component.ts
index 5f1923e6f35..fdb08b988f0 100644
--- a/aio/content/examples/component-styles/src/app/hero-app.component.ts
+++ b/aio/content/examples/component-styles/src/app/hero-app.component.ts
@@ -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 {
diff --git a/aio/content/examples/component-styles/src/app/hero-controls.component.ts b/aio/content/examples/component-styles/src/app/hero-controls.component.ts
index 5d293596d2a..2b6ad84aa0e 100644
--- a/aio/content/examples/component-styles/src/app/hero-controls.component.ts
+++ b/aio/content/examples/component-styles/src/app/hero-controls.component.ts
@@ -3,7 +3,7 @@ import { Hero } from './hero';
 
 // #docregion inlinestyles
 @Component({
-  selector: 'hero-controls',
+  selector: 'app-hero-controls',
   template: `
     <style>
       button {
diff --git a/aio/content/examples/component-styles/src/app/hero-details.component.ts b/aio/content/examples/component-styles/src/app/hero-details.component.ts
index bd86a63e04c..3a249b753ab 100644
--- a/aio/content/examples/component-styles/src/app/hero-details.component.ts
+++ b/aio/content/examples/component-styles/src/app/hero-details.component.ts
@@ -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
diff --git a/aio/content/examples/component-styles/src/app/hero-team.component.ts b/aio/content/examples/component-styles/src/app/hero-team.component.ts
index 4f092d2827c..b4f3bb5081a 100644
--- a/aio/content/examples/component-styles/src/app/hero-team.component.ts
+++ b/aio/content/examples/component-styles/src/app/hero-team.component.ts
@@ -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">
diff --git a/aio/content/examples/component-styles/src/app/quest-summary.component.ts b/aio/content/examples/component-styles/src/app/quest-summary.component.ts
index 2a2dc65fe08..25765ed16dd 100644
--- a/aio/content/examples/component-styles/src/app/quest-summary.component.ts
+++ b/aio/content/examples/component-styles/src/app/quest-summary.component.ts
@@ -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']
diff --git a/aio/content/examples/component-styles/src/app/hero-team.component.css b/aio/content/examples/component-styles/src/assets/hero-team.component.css
similarity index 100%
rename from aio/content/examples/component-styles/src/app/hero-team.component.css
rename to aio/content/examples/component-styles/src/assets/hero-team.component.css
diff --git a/aio/content/examples/component-styles/src/index.html b/aio/content/examples/component-styles/src/index.html
index 6e9dc51b325..ec478bd8ef1 100644
--- a/aio/content/examples/component-styles/src/index.html
+++ b/aio/content/examples/component-styles/src/index.html
@@ -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>
diff --git a/aio/content/examples/component-styles/src/main.ts b/aio/content/examples/component-styles/src/main.ts
index 6b6532d428a..0740658908d 100644
--- a/aio/content/examples/component-styles/src/main.ts
+++ b/aio/content/examples/component-styles/src/main.ts
@@ -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);
diff --git a/aio/content/examples/dependency-injection-in-action/e2e-spec.ts b/aio/content/examples/dependency-injection-in-action/e2e/app.e2e-spec.ts
similarity index 98%
rename from aio/content/examples/dependency-injection-in-action/e2e-spec.ts
rename to aio/content/examples/dependency-injection-in-action/e2e/app.e2e-spec.ts
index 520d2d187e6..07ab501be78 100644
--- a/aio/content/examples/dependency-injection-in-action/e2e-spec.ts
+++ b/aio/content/examples/dependency-injection-in-action/e2e/app.e2e-spec.ts
@@ -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);
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/app.component.html b/aio/content/examples/dependency-injection-in-action/src/app/app.component.html
index a715e484fee..45cc12bc2df 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/app.component.html
+++ b/aio/content/examples/dependency-injection-in-action/src/app/app.component.html
@@ -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>
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/app.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/app.component.ts
index 250103124ac..b29f3b41269 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/app.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/app.component.ts
@@ -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 ]
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts
index 84f8e05e66b..1e573e6acd5 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-bio.component.ts
@@ -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>
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts
index 217c5edcd0a..07f9a85d6b6 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-bios.component.ts
@@ -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]
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts
index add6df91c57..205e1f93354 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-contact.component.ts
@@ -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>`
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts
index da2c57aeaf9..beaa35c53a0 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.1.ts
@@ -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 }]
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts
index ff8e5a24e88..2b44cdfe709 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/hero-of-the-month.component.ts
@@ -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
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts b/aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts
index e220114daad..94b4e0b7fe0 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/highlight.directive.ts
@@ -3,11 +3,11 @@
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
-  selector: '[myHighlight]'
+  selector: '[appHighlight]'
 })
 export class HighlightDirective {
 
-  @Input('myHighlight') highlightColor: string;
+  @Input('appHighlight') highlightColor: string;
 
   private el: HTMLElement;
 
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
index c6f208f79be..f1e48d76959 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts
@@ -206,7 +206,7 @@ export class CathyComponent {
 
 ///////// ParentFinder //////
 @Component({
-  selector: 'parent-finder',
+  selector: 'app-parent-finder',
   template: `
     <h2>Parent Finder</h2>
     <alex></alex>
diff --git a/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
index 8cb6e3c69c2..f5100dddef6 100644
--- a/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/app/sorted-heroes.component.ts
@@ -8,7 +8,7 @@ import { HeroService }       from './hero.service';
 /////// HeroesBaseComponent /////
 // #docregion heroes-base, injection
 @Component({
-  selector: 'unsorted-heroes',
+  selector: 'app-unsorted-heroes',
   template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
   providers: [HeroService]
 })
@@ -33,7 +33,7 @@ export class HeroesBaseComponent implements OnInit {
 /////// SortedHeroesComponent /////
 // #docregion sorted-heroes
 @Component({
-  selector: 'sorted-heroes',
+  selector: 'app-sorted-heroes',
   template: `<div *ngFor="let hero of heroes">{{hero.name}}</div>`,
   providers: [HeroService]
 })
diff --git a/aio/content/examples/dependency-injection-in-action/src/sample.css b/aio/content/examples/dependency-injection-in-action/src/assets/sample.css
similarity index 100%
rename from aio/content/examples/dependency-injection-in-action/src/sample.css
rename to aio/content/examples/dependency-injection-in-action/src/assets/sample.css
diff --git a/aio/content/examples/dependency-injection-in-action/src/index.html b/aio/content/examples/dependency-injection-in-action/src/index.html
index 0308c72155d..8b36042f0cb 100644
--- a/aio/content/examples/dependency-injection-in-action/src/index.html
+++ b/aio/content/examples/dependency-injection-in-action/src/index.html
@@ -1,29 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <base href="/">
     <meta charset="UTF-8">
     <title>Dependency Injection</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- #docregion style -->
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="sample.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>
+    <link rel="stylesheet" href="assets/sample.css">
   </head>
 
   <body>
-    <my-app>Loading app...</my-app>
+    <app-root></app-root>
   </body>
 
 </html>
diff --git a/aio/content/examples/dependency-injection-in-action/src/main.ts b/aio/content/examples/dependency-injection-in-action/src/main.ts
index 6b6532d428a..0740658908d 100644
--- a/aio/content/examples/dependency-injection-in-action/src/main.ts
+++ b/aio/content/examples/dependency-injection-in-action/src/main.ts
@@ -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);
diff --git a/aio/content/examples/dependency-injection/e2e-spec.ts b/aio/content/examples/dependency-injection/e2e/app.e2e-spec.ts
similarity index 93%
rename from aio/content/examples/dependency-injection/e2e-spec.ts
rename to aio/content/examples/dependency-injection/e2e/app.e2e-spec.ts
index 67f76e90fc0..b61acf3a1ea 100644
--- a/aio/content/examples/dependency-injection/e2e-spec.ts
+++ b/aio/content/examples/dependency-injection/e2e/app.e2e-spec.ts
@@ -140,12 +140,12 @@ describe('Dependency Injection Tests', function () {
     });
 
     it('unauthorized user should have multiple unauthorized heroes', function () {
-      let heroes = element.all(by.css('#unauthorized hero-list div'));
+      let heroes = element.all(by.css('#unauthorized app-hero-list div'));
       expect(heroes.count()).toBeGreaterThan(0);
     });
 
     it('unauthorized user should have no secret heroes', function () {
-      let heroes = element.all(by.css('#unauthorized hero-list div'));
+      let heroes = element.all(by.css('#unauthorized app-hero-list div'));
       expect(heroes.count()).toBeGreaterThan(0);
 
       let filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
@@ -158,7 +158,7 @@ describe('Dependency Injection Tests', function () {
     });
 
     it('unauthorized user should have no authorized heroes listed', function () {
-      expect(element.all(by.css('#authorized hero-list div')).count()).toEqual(0);
+      expect(element.all(by.css('#authorized app-hero-list div')).count()).toEqual(0);
     });
 
     describe('after button click', function() {
@@ -174,12 +174,12 @@ describe('Dependency Injection Tests', function () {
       });
 
       it('authorized user should have multiple authorized heroes ', function () {
-        let heroes = element.all(by.css('#authorized hero-list div'));
+        let heroes = element.all(by.css('#authorized app-hero-list div'));
         expect(heroes.count()).toBeGreaterThan(0);
       });
 
       it('authorized user should have secret heroes', function () {
-        let heroes = element.all(by.css('#authorized hero-list div'));
+        let heroes = element.all(by.css('#authorized app-hero-list div'));
         expect(heroes.count()).toBeGreaterThan(0);
 
         let filteredHeroes = heroes.filter(function(elem: ElementFinder, index: number){
@@ -192,7 +192,7 @@ describe('Dependency Injection Tests', function () {
       });
 
       it('authorized user should have no unauthorized heroes listed', function () {
-        expect(element.all(by.css('#unauthorized hero-list div')).count()).toEqual(0);
+        expect(element.all(by.css('#unauthorized app-hero-list div')).count()).toEqual(0);
       });
     });
   });
diff --git a/aio/content/examples/dependency-injection/src/app/app.component.1.ts b/aio/content/examples/dependency-injection/src/app/app.component.1.ts
index b398ebeb57f..fd7043f1872 100644
--- a/aio/content/examples/dependency-injection/src/app/app.component.1.ts
+++ b/aio/content/examples/dependency-injection/src/app/app.component.1.ts
@@ -4,11 +4,11 @@
 import { Component }         from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <h1>{{title}}</h1>
-    <my-car></my-car>
-    <my-heroes></my-heroes>
+    <app-car></app-car>
+    <app-heroes></app-heroes>
   `
 })
 
diff --git a/aio/content/examples/dependency-injection/src/app/app.component.2.ts b/aio/content/examples/dependency-injection/src/app/app.component.2.ts
index d24df5568c0..55637697f1e 100644
--- a/aio/content/examples/dependency-injection/src/app/app.component.2.ts
+++ b/aio/content/examples/dependency-injection/src/app/app.component.2.ts
@@ -7,11 +7,11 @@ import { APP_CONFIG, AppConfig }    from './app.config';
 // #enddocregion imports
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <h1>{{title}}</h1>
-    <my-car></my-car>
-    <my-heroes></my-heroes>
+    <app-car></app-car>
+    <app-heroes></app-heroes>
   `
 })
 export class AppComponent {
diff --git a/aio/content/examples/dependency-injection/src/app/app.component.ts b/aio/content/examples/dependency-injection/src/app/app.component.ts
index 3563fdc070a..1612f6402e4 100644
--- a/aio/content/examples/dependency-injection/src/app/app.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/app.component.ts
@@ -9,20 +9,20 @@ import { UserService } from './user.service';
 // #enddocregion imports
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template:  `
     <h1>{{title}}</h1>
-    <my-car></my-car>
-    <my-injectors></my-injectors>
-    <my-tests></my-tests>
+    <app-car></app-car>
+    <app-injectors></app-injectors>
+    <app-tests></app-tests>
     <h2>User</h2>
     <p id="user">
       {{userInfo}}
       <button (click)="nextUser()">Next User</button>
     <p>
-    <my-heroes id="authorized" *ngIf="isAuthorized"></my-heroes>
-    <my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes>
-    <my-providers></my-providers>
+    <app-heroes id="authorized" *ngIf="isAuthorized"></app-heroes>
+    <app-heroes id="unauthorized" *ngIf="!isAuthorized"></app-heroes>
+    <app-providers></app-providers>
   `,
   providers: [Logger]
 })
diff --git a/aio/content/examples/dependency-injection/src/app/car/car.component.ts b/aio/content/examples/dependency-injection/src/app/car/car.component.ts
index 9a835ef1244..481ccd6ceea 100644
--- a/aio/content/examples/dependency-injection/src/app/car/car.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/car/car.component.ts
@@ -13,7 +13,7 @@ import { useInjector }        from './car-injector';
 
 
 @Component({
-  selector: 'my-car',
+  selector: 'app-car',
   template: `
   <h2>Cars</h2>
   <div id="di">{{car.drive()}}</div>
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts
index ba32366aa9c..c769ddc67ed 100644
--- a/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts
@@ -4,7 +4,7 @@ import { Component }   from '@angular/core';
 import { HEROES }      from './mock-heroes';
 
 @Component({
-  selector: 'hero-list',
+  selector: 'app-hero-list',
   template: `
   <div *ngFor="let hero of heroes">
     {{hero.id}} - {{hero.name}}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts
index cb23d3257ce..1f08ead95a6 100644
--- a/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts
@@ -13,7 +13,7 @@ import { HeroService } from './hero.service';
 // #docregion
 
 @Component({
-  selector: 'hero-list',
+  selector: 'app-hero-list',
   template: `
   <div *ngFor="let hero of heroes">
     {{hero.id}} - {{hero.name}}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts
index db3a325bdbd..96ee3fd5108 100644
--- a/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts
@@ -6,7 +6,7 @@ import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
 @Component({
-  selector: 'hero-list',
+  selector: 'app-hero-list',
   template: `
   <div *ngFor="let hero of heroes">
     {{hero.id}} - {{hero.name}}
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts b/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts
index e0e9deae08a..ded32fb995b 100644
--- a/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts
+++ b/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts
@@ -9,13 +9,13 @@ import { HeroService }        from './hero.service';
 // #docregion full, v1
 
 @Component({
-  selector: 'my-heroes',
+  selector: 'app-heroes',
     // #enddocregion v1
   providers: [HeroService],
   // #docregion v1
   template: `
   <h2>Heroes</h2>
-  <hero-list></hero-list>
+  <app-hero-list></app-hero-list>
   `
 })
 export class HeroesComponent { }
diff --git a/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.ts b/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.ts
index 5923f7590bd..047f8160854 100644
--- a/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/heroes/heroes.component.ts
@@ -4,10 +4,10 @@ import { Component }          from '@angular/core';
 import { heroServiceProvider } from './hero.service.provider';
 
 @Component({
-  selector: 'my-heroes',
+  selector: 'app-heroes',
   template: `
   <h2>Heroes</h2>
-  <hero-list></hero-list>
+  <app-hero-list></app-hero-list>
   `,
   providers: [heroServiceProvider]
 })
diff --git a/aio/content/examples/dependency-injection/src/app/injector.component.ts b/aio/content/examples/dependency-injection/src/app/injector.component.ts
index 1b1a065e4c6..403a6c427b1 100644
--- a/aio/content/examples/dependency-injection/src/app/injector.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/injector.component.ts
@@ -10,7 +10,7 @@ import { Logger }               from './logger.service';
 
 // #docregion injector
 @Component({
-  selector: 'my-injectors',
+  selector: 'app-injectors',
   template: `
   <h2>Other Injections</h2>
   <div id="car">{{car.drive()}}</div>
diff --git a/aio/content/examples/dependency-injection/src/app/providers.component.ts b/aio/content/examples/dependency-injection/src/app/providers.component.ts
index 589de212ed5..9df2975ab31 100644
--- a/aio/content/examples/dependency-injection/src/app/providers.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/providers.component.ts
@@ -249,7 +249,7 @@ export class Provider10Component implements OnInit {
 
 /////////////////
 @Component({
-  selector: 'my-providers',
+  selector: 'app-providers',
   template: `
   <h2>Provider variations</h2>
   <div id="p1"><provider-1></provider-1></div>
diff --git a/aio/content/examples/dependency-injection/src/app/test.component.ts b/aio/content/examples/dependency-injection/src/app/test.component.ts
index fc0fef75a89..cbf5fe0034c 100644
--- a/aio/content/examples/dependency-injection/src/app/test.component.ts
+++ b/aio/content/examples/dependency-injection/src/app/test.component.ts
@@ -8,7 +8,7 @@ import { HeroService }         from './heroes/hero.service';
 import { HeroListComponent }   from './heroes/hero-list.component';
 
 @Component({
-  selector: 'my-tests',
+  selector: 'app-tests',
   template: `
     <h2>Tests</h2>
     <p id="tests">Tests {{results.pass}}: {{results.message}}</p>
diff --git a/aio/content/examples/dependency-injection/src/index.html b/aio/content/examples/dependency-injection/src/index.html
index 87a9d7e6941..4736378237d 100644
--- a/aio/content/examples/dependency-injection/src/index.html
+++ b/aio/content/examples/dependency-injection/src/index.html
@@ -1,27 +1,15 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Dependency Injection</title>
     <base href="/">
     <meta charset="UTF-8">
     <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 ...</my-app>
+    <app-root></app-root>
   </body>
 
 </html>
diff --git a/aio/content/examples/dependency-injection/src/main.ts b/aio/content/examples/dependency-injection/src/main.ts
index 1a1d4817199..bf6732fff76 100644
--- a/aio/content/examples/dependency-injection/src/main.ts
+++ b/aio/content/examples/dependency-injection/src/main.ts
@@ -1,5 +1,12 @@
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }              from './app/app.module';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
 
 // #docregion bootstrap
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/deployment/src/index.html b/aio/content/examples/deployment/src/index.html
index 770e64bc4de..ace98faf39d 100644
--- a/aio/content/examples/deployment/src/index.html
+++ b/aio/content/examples/deployment/src/index.html
@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <!-- Doesn't load from node_modules! -->
 
@@ -32,7 +32,7 @@
   </head>
 
   <body>
-    <my-app>loading...</my-app>
+    <my-app></my-app>
   </body>
 
 </html>
diff --git a/aio/content/examples/displaying-data/e2e-spec.ts b/aio/content/examples/displaying-data/e2e/app.e2e-spec.ts
similarity index 100%
rename from aio/content/examples/displaying-data/e2e-spec.ts
rename to aio/content/examples/displaying-data/e2e/app.e2e-spec.ts
diff --git a/aio/content/examples/displaying-data/src/app/app-ctor.component.ts b/aio/content/examples/displaying-data/src/app/app-ctor.component.ts
index b275baa8e6f..5fd9d450730 100644
--- a/aio/content/examples/displaying-data/src/app/app-ctor.component.ts
+++ b/aio/content/examples/displaying-data/src/app/app-ctor.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app-ctor',
+  selector: 'app-ctor',
   template: `
     <h1>{{title}} [Ctor version]</h1>
     <h2>My favorite hero is: {{myHero}}</h2>
diff --git a/aio/content/examples/displaying-data/src/app/app.component.1.ts b/aio/content/examples/displaying-data/src/app/app.component.1.ts
index 1cbeb0f731b..674ac5622bf 100644
--- a/aio/content/examples/displaying-data/src/app/app.component.1.ts
+++ b/aio/content/examples/displaying-data/src/app/app.component.1.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   // #docregion template
   template: `
     <h1>{{title}}</h1>
diff --git a/aio/content/examples/displaying-data/src/app/app.component.2.ts b/aio/content/examples/displaying-data/src/app/app.component.2.ts
index da7a6539733..4d4e2d50e54 100644
--- a/aio/content/examples/displaying-data/src/app/app.component.2.ts
+++ b/aio/content/examples/displaying-data/src/app/app.component.2.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   // #docregion template
   template: `
     <h1>{{title}}</h1>
diff --git a/aio/content/examples/displaying-data/src/app/app.component.3.ts b/aio/content/examples/displaying-data/src/app/app.component.3.ts
index 06ab0605575..435a9be767b 100644
--- a/aio/content/examples/displaying-data/src/app/app.component.3.ts
+++ b/aio/content/examples/displaying-data/src/app/app.component.3.ts
@@ -6,7 +6,7 @@ import { Hero } from './hero';
 // #enddocregion import
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   // #docregion template
   template: `
     <h1>{{title}}</h1>
diff --git a/aio/content/examples/displaying-data/src/app/app.component.ts b/aio/content/examples/displaying-data/src/app/app.component.ts
index 7234959265b..a03f3de1dd3 100644
--- a/aio/content/examples/displaying-data/src/app/app.component.ts
+++ b/aio/content/examples/displaying-data/src/app/app.component.ts
@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
   <h1>{{title}}</h1>
   <h2>My favorite hero is: {{myHero.name}}</h2>
diff --git a/aio/content/examples/displaying-data/src/index.html b/aio/content/examples/displaying-data/src/index.html
index ddcbade46b4..3e5cbf7bea3 100644
--- a/aio/content/examples/displaying-data/src/index.html
+++ b/aio/content/examples/displaying-data/src/index.html
@@ -1,27 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Displaying Data</title>
     <base href="/">
     <meta charset="UTF-8">
     <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>
 
   <!-- #docregion body -->
   <body>
-    <my-app>loading...</my-app>
+    <app-root></app-root>
   </body>
   <!-- #enddocregion body -->
 
diff --git a/aio/content/examples/displaying-data/src/main.ts b/aio/content/examples/displaying-data/src/main.ts
index f332d1d2451..0740658908d 100644
--- a/aio/content/examples/displaying-data/src/main.ts
+++ b/aio/content/examples/displaying-data/src/main.ts
@@ -1,6 +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);
diff --git a/aio/content/examples/docs-style-guide/e2e-spec.ts b/aio/content/examples/docs-style-guide/e2e/app.e2e-spec.ts
similarity index 100%
rename from aio/content/examples/docs-style-guide/e2e-spec.ts
rename to aio/content/examples/docs-style-guide/e2e/app.e2e-spec.ts
diff --git a/aio/content/examples/docs-style-guide/src/app/app.component.ts b/aio/content/examples/docs-style-guide/src/app/app.component.ts
index 1551e57e6c9..bc2667c8043 100644
--- a/aio/content/examples/docs-style-guide/src/app/app.component.ts
+++ b/aio/content/examples/docs-style-guide/src/app/app.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 import { Hero, HEROES } from './hero';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
diff --git a/aio/content/examples/docs-style-guide/src/index.2.html b/aio/content/examples/docs-style-guide/src/index.2.html
index d261a18f4a7..a85f58e57e5 100644
--- a/aio/content/examples/docs-style-guide/src/index.2.html
+++ b/aio/content/examples/docs-style-guide/src/index.2.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Second Authors Style Guide</title>
   </head>
diff --git a/aio/content/examples/docs-style-guide/src/index.html b/aio/content/examples/docs-style-guide/src/index.html
index 78f8977d8b3..2705e7ee968 100644
--- a/aio/content/examples/docs-style-guide/src/index.html
+++ b/aio/content/examples/docs-style-guide/src/index.html
@@ -1,30 +1,15 @@
 <!DOCTYPE html>
 <!-- #docregion -->
-<html>
+<html lang="en">
   <head>
     <title>Docs Style Guide</title>
     <base href="/">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-     <!-- #docregion styles -->
-    <link rel="stylesheet" href="styles.css">
-     <!-- #enddocregion styles -->
-
-    <!-- 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>
diff --git a/aio/content/examples/docs-style-guide/src/main.ts b/aio/content/examples/docs-style-guide/src/main.ts
index 7cecd2600ef..0740658908d 100644
--- a/aio/content/examples/docs-style-guide/src/main.ts
+++ b/aio/content/examples/docs-style-guide/src/main.ts
@@ -1,4 +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);
diff --git a/aio/content/examples/dynamic-component-loader/e2e-spec.ts b/aio/content/examples/dynamic-component-loader/e2e/app.e2e-spec.ts
similarity index 100%
rename from aio/content/examples/dynamic-component-loader/e2e-spec.ts
rename to aio/content/examples/dynamic-component-loader/e2e/app.e2e-spec.ts
diff --git a/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts b/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
index 6df47208368..1e59a892049 100644
--- a/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
+++ b/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts
@@ -6,7 +6,7 @@ import { AdItem }      from './ad-item';
 import { AdComponent } from './ad.component';
 
 @Component({
-  selector: 'add-banner',
+  selector: 'app-add-banner',
   // #docregion ad-host
   template: `
               <div class="ad-banner">
diff --git a/aio/content/examples/dynamic-component-loader/src/app/app.component.ts b/aio/content/examples/dynamic-component-loader/src/app/app.component.ts
index 89359ccdf6f..40fe96a2763 100644
--- a/aio/content/examples/dynamic-component-loader/src/app/app.component.ts
+++ b/aio/content/examples/dynamic-component-loader/src/app/app.component.ts
@@ -5,10 +5,10 @@ import { AdService }         from './ad.service';
 import { AdItem }            from './ad-item';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <div>
-      <add-banner [ads]="ads"></add-banner>
+      <app-add-banner [ads]="ads"></app-add-banner>
     </div>
   `
 })
diff --git a/aio/content/examples/dynamic-component-loader/src/sample.css b/aio/content/examples/dynamic-component-loader/src/assets/sample.css
similarity index 100%
rename from aio/content/examples/dynamic-component-loader/src/sample.css
rename to aio/content/examples/dynamic-component-loader/src/assets/sample.css
diff --git a/aio/content/examples/dynamic-component-loader/src/index.html b/aio/content/examples/dynamic-component-loader/src/index.html
index 9239d91d9a9..67c9b6c2213 100644
--- a/aio/content/examples/dynamic-component-loader/src/index.html
+++ b/aio/content/examples/dynamic-component-loader/src/index.html
@@ -1,26 +1,14 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <base href="/">
     <title>Dynamic Component Loader</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="sample.css">
-
-    <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>
-    <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>
+    <link rel="stylesheet" href="assets/sample.css">
   </head>
   <body>
-    <my-app>Loading app...</my-app>
+    <app-root></app-root>
   </body>
 
 </html>
diff --git a/aio/content/examples/dynamic-component-loader/src/main.ts b/aio/content/examples/dynamic-component-loader/src/main.ts
index 53d16fa43ab..0740658908d 100644
--- a/aio/content/examples/dynamic-component-loader/src/main.ts
+++ b/aio/content/examples/dynamic-component-loader/src/main.ts
@@ -1,6 +1,12 @@
 // #docregion
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }              from './app/app.module';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
 
 platformBrowserDynamic().bootstrapModule(AppModule);
-
diff --git a/aio/content/examples/dynamic-form/e2e-spec.ts b/aio/content/examples/dynamic-form/e2e/app.e2e-spec.ts
similarity index 100%
rename from aio/content/examples/dynamic-form/e2e-spec.ts
rename to aio/content/examples/dynamic-form/e2e/app.e2e-spec.ts
diff --git a/aio/content/examples/dynamic-form/src/app/app.component.ts b/aio/content/examples/dynamic-form/src/app/app.component.ts
index 582daced2e3..51d154cc78a 100644
--- a/aio/content/examples/dynamic-form/src/app/app.component.ts
+++ b/aio/content/examples/dynamic-form/src/app/app.component.ts
@@ -4,11 +4,11 @@ import { Component }       from '@angular/core';
 import { QuestionService } from './question.service';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <div>
       <h2>Job Application for Heroes</h2>
-      <dynamic-form [questions]="questions"></dynamic-form>
+      <app-dynamic-form [questions]="questions"></app-dynamic-form>
     </div>
   `,
   providers:  [QuestionService]
diff --git a/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts b/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts
index 024571a7c2d..9a4c25829fe 100644
--- a/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts
+++ b/aio/content/examples/dynamic-form/src/app/dynamic-form-question.component.ts
@@ -5,7 +5,7 @@ import { FormGroup }        from '@angular/forms';
 import { QuestionBase }     from './question-base';
 
 @Component({
-  selector: 'df-question',
+  selector: 'app-question',
   templateUrl: './dynamic-form-question.component.html'
 })
 export class DynamicFormQuestionComponent {
diff --git a/aio/content/examples/dynamic-form/src/app/dynamic-form.component.html b/aio/content/examples/dynamic-form/src/app/dynamic-form.component.html
index 717f09ff718..33c8f0bb512 100644
--- a/aio/content/examples/dynamic-form/src/app/dynamic-form.component.html
+++ b/aio/content/examples/dynamic-form/src/app/dynamic-form.component.html
@@ -3,7 +3,7 @@
   <form (ngSubmit)="onSubmit()" [formGroup]="form">
 
     <div *ngFor="let question of questions" class="form-row">
-      <df-question [question]="question" [form]="form"></df-question>
+      <app-question [question]="question" [form]="form"></app-question>
     </div>
 
     <div class="form-row">
diff --git a/aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts b/aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts
index 8d95c0d3a41..4167b4617fa 100644
--- a/aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts
+++ b/aio/content/examples/dynamic-form/src/app/dynamic-form.component.ts
@@ -6,7 +6,7 @@ import { QuestionBase }              from './question-base';
 import { QuestionControlService }    from './question-control.service';
 
 @Component({
-  selector: 'dynamic-form',
+  selector: 'app-dynamic-form',
   templateUrl: './dynamic-form.component.html',
   providers: [ QuestionControlService ]
 })
diff --git a/aio/content/examples/dynamic-form/src/sample.css b/aio/content/examples/dynamic-form/src/assets/sample.css
similarity index 100%
rename from aio/content/examples/dynamic-form/src/sample.css
rename to aio/content/examples/dynamic-form/src/assets/sample.css
diff --git a/aio/content/examples/dynamic-form/src/index.html b/aio/content/examples/dynamic-form/src/index.html
index 01963f71e2f..20688f24057 100644
--- a/aio/content/examples/dynamic-form/src/index.html
+++ b/aio/content/examples/dynamic-form/src/index.html
@@ -1,28 +1,14 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <base href="/">
     <title>Dynamic Form</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- #docregion style -->
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="sample.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>
+    <link rel="stylesheet" href="assets/sample.css">
   </head>
   <body>
-    <my-app>Loading app...</my-app>
+    <app-root></app-root>
   </body>
 
 </html>
diff --git a/aio/content/examples/dynamic-form/src/main.ts b/aio/content/examples/dynamic-form/src/main.ts
index 6b6532d428a..0740658908d 100644
--- a/aio/content/examples/dynamic-form/src/main.ts
+++ b/aio/content/examples/dynamic-form/src/main.ts
@@ -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);
diff --git a/aio/content/examples/form-validation/e2e-spec.ts b/aio/content/examples/form-validation/e2e/app.e2e-spec.ts
similarity index 98%
rename from aio/content/examples/form-validation/e2e-spec.ts
rename to aio/content/examples/form-validation/e2e/app.e2e-spec.ts
index cd17cd4e3d9..4d24eedb7aa 100644
--- a/aio/content/examples/form-validation/e2e-spec.ts
+++ b/aio/content/examples/form-validation/e2e/app.e2e-spec.ts
@@ -11,7 +11,7 @@ describe('Form Validation Tests', function () {
 
   describe('Template-driven form', () => {
     beforeAll(() => {
-      getPage('hero-form-template');
+      getPage('app-hero-form-template');
     });
 
     tests('Template-Driven Form');
@@ -19,7 +19,7 @@ describe('Form Validation Tests', function () {
 
   describe('Reactive form', () => {
     beforeAll(() => {
-      getPage('hero-form-reactive');
+      getPage('app-hero-form-reactive');
     });
 
     tests('Reactive Form');
diff --git a/aio/content/examples/form-validation/src/app/app.component.ts b/aio/content/examples/form-validation/src/app/app.component.ts
index 5260b8d9e1f..dd7141f45e9 100644
--- a/aio/content/examples/form-validation/src/app/app.component.ts
+++ b/aio/content/examples/form-validation/src/app/app.component.ts
@@ -2,9 +2,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
-  template: `<hero-form-template></hero-form-template>
+  selector: 'app-root',
+  template: `<app-hero-form-template></app-hero-form-template>
              <hr>
-             <hero-form-reactive></hero-form-reactive>`
+             <app-hero-form-reactive></app-hero-form-reactive>`
 })
 export class AppComponent { }
diff --git a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts
index 7ce9e57fa2d..e1b3d6bc8b0 100644
--- a/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts
+++ b/aio/content/examples/form-validation/src/app/reactive/hero-form-reactive.component.ts
@@ -6,7 +6,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
 
 @Component({
-  selector: 'hero-form-reactive',
+  selector: 'app-hero-form-reactive',
   templateUrl: './hero-form-reactive.component.html'
 })
 export class HeroFormReactiveComponent implements OnInit {
diff --git a/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts b/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
index f78b8fb25bc..1ffd6d638f8 100644
--- a/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
+++ b/aio/content/examples/form-validation/src/app/shared/forbidden-name.directive.ts
@@ -14,7 +14,7 @@ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
 
 // #docregion directive
 @Directive({
-  selector: '[forbiddenName]',
+  selector: '[appForbiddenName]',
   // #docregion directive-providers
   providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
   // #enddocregion directive-providers
diff --git a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts
index 2ee1133eaef..cc8bd0b30fb 100644
--- a/aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts
+++ b/aio/content/examples/form-validation/src/app/template/hero-form-template.component.ts
@@ -4,7 +4,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'hero-form-template',
+  selector: 'app-hero-form-template',
   templateUrl: './hero-form-template.component.html'
 })
 export class HeroFormTemplateComponent {
diff --git a/aio/content/examples/form-validation/src/forms.css b/aio/content/examples/form-validation/src/assets/forms.css
similarity index 100%
rename from aio/content/examples/form-validation/src/forms.css
rename to aio/content/examples/form-validation/src/assets/forms.css
diff --git a/aio/content/examples/form-validation/src/index.html b/aio/content/examples/form-validation/src/index.html
index e7201508d7d..859ac122998 100644
--- a/aio/content/examples/form-validation/src/index.html
+++ b/aio/content/examples/form-validation/src/index.html
@@ -1,29 +1,15 @@
-<html>
+<html lang="en">
   <head>
     <title>Hero Form with Validation</title>
     <base href="/">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
     <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="forms.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>
+    <link rel="stylesheet" href="assets/forms.css">
   </head>
 
   <body>
-    <my-app>Loading...</my-app>
+    <app-root></app-root>
   </body>
 </html>
 
diff --git a/aio/content/examples/form-validation/src/main.ts b/aio/content/examples/form-validation/src/main.ts
index f332d1d2451..0740658908d 100644
--- a/aio/content/examples/form-validation/src/main.ts
+++ b/aio/content/examples/form-validation/src/main.ts
@@ -1,6 +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);
diff --git a/aio/content/examples/forms/e2e-spec.ts b/aio/content/examples/forms/e2e/app.e2e-spec.ts
similarity index 100%
rename from aio/content/examples/forms/e2e-spec.ts
rename to aio/content/examples/forms/e2e/app.e2e-spec.ts
diff --git a/aio/content/examples/forms/src/app/app.component.ts b/aio/content/examples/forms/src/app/app.component.ts
index 454f7e03db6..4e48439924b 100644
--- a/aio/content/examples/forms/src/app/app.component.ts
+++ b/aio/content/examples/forms/src/app/app.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
-  template: '<hero-form></hero-form>'
+  selector: 'app-root',
+  template: '<app-hero-form></app-hero-form>'
 })
 export class AppComponent { }
diff --git a/aio/content/examples/forms/src/app/hero-form.component.ts b/aio/content/examples/forms/src/app/hero-form.component.ts
index 34be523a7f1..bfc290b5a3f 100644
--- a/aio/content/examples/forms/src/app/hero-form.component.ts
+++ b/aio/content/examples/forms/src/app/hero-form.component.ts
@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
 import { Hero }    from './hero';
 
 @Component({
-  selector: 'hero-form',
+  selector: 'app-hero-form',
   templateUrl: './hero-form.component.html'
 })
 export class HeroFormComponent {
diff --git a/aio/content/examples/forms/src/forms.css b/aio/content/examples/forms/src/assets/forms.css
similarity index 100%
rename from aio/content/examples/forms/src/forms.css
rename to aio/content/examples/forms/src/assets/forms.css
diff --git a/aio/content/examples/forms/src/index.html b/aio/content/examples/forms/src/index.html
index 032888ca3e7..44a5c33b059 100644
--- a/aio/content/examples/forms/src/index.html
+++ b/aio/content/examples/forms/src/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!-- #docregion -->
-<html>
+<html lang="en">
   <head>
     <title>Hero Form</title>
     <base href="/">
@@ -12,24 +12,12 @@
           href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
      <!-- #enddocregion bootstrap -->
      <!-- #docregion styles -->
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="forms.css">
-     <!-- #enddocregion styles -->
-
-    <!-- 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>
+    <link rel="stylesheet" href="assets/forms.css">
+    <!-- #enddocregion styles -->
   </head>
 
   <body>
-    <my-app>Loading...</my-app>
+    <app-root></app-root>
   </body>
 
 </html>
diff --git a/aio/content/examples/forms/src/main.ts b/aio/content/examples/forms/src/main.ts
index 6b6532d428a..0740658908d 100644
--- a/aio/content/examples/forms/src/main.ts
+++ b/aio/content/examples/forms/src/main.ts
@@ -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);
diff --git a/aio/content/examples/hierarchical-dependency-injection/e2e-spec.ts b/aio/content/examples/hierarchical-dependency-injection/e2e/app.e2e-spec.ts
similarity index 69%
rename from aio/content/examples/hierarchical-dependency-injection/e2e-spec.ts
rename to aio/content/examples/hierarchical-dependency-injection/e2e/app.e2e-spec.ts
index 4630453f785..09a4f3d27b8 100644
--- a/aio/content/examples/hierarchical-dependency-injection/e2e-spec.ts
+++ b/aio/content/examples/hierarchical-dependency-injection/e2e/app.e2e-spec.ts
@@ -14,24 +14,24 @@ describe('Hierarchical dependency injection', () => {
       income: '',
 
       // queries
-      heroEl: element.all(by.css('heroes-list li')).get(0), // first hero
-      heroCardEl: element(by.css('heroes-list hero-tax-return')), // first hero tax-return
-      taxReturnNameEl: element.all(by.css('heroes-list hero-tax-return #name')).get(0),
-      incomeInputEl: element.all(by.css('heroes-list hero-tax-return input')).get(0),
-      cancelButtonEl: element(by.cssContainingText('heroes-list hero-tax-return button', 'Cancel')),
-      closeButtonEl: element(by.cssContainingText('heroes-list hero-tax-return button', 'Close')),
-      saveButtonEl: element(by.cssContainingText('heroes-list hero-tax-return button', 'Save'))
+      heroEl: element.all(by.css('app-heroes-list li')).get(0), // first hero
+      heroCardEl: element(by.css('app-heroes-list app-hero-tax-return')), // first hero tax-return
+      taxReturnNameEl: element.all(by.css('app-heroes-list app-hero-tax-return #name')).get(0),
+      incomeInputEl: element.all(by.css('app-heroes-list app-hero-tax-return input')).get(0),
+      cancelButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Cancel')),
+      closeButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Close')),
+      saveButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Save'))
     };
 
     it('should list multiple heroes', () => {
-      expect(element.all(by.css('heroes-list li')).count()).toBeGreaterThan(1);
+      expect(element.all(by.css('app-heroes-list li')).count()).toBeGreaterThan(1);
     });
 
     it('should show no hero tax-returns at the start', () => {
-      expect(element.all(by.css('heroes-list li hero-tax-return')).count()).toBe(0);
+      expect(element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0);
     });
 
-    it('should open first hero in hero-tax-return view after click', () => {
+    it('should open first hero in app-hero-tax-return view after click', () => {
       page.heroEl.getText()
         .then(val => {
           page.heroName = val;
@@ -74,7 +74,7 @@ describe('Hierarchical dependency injection', () => {
     it('should be able to close tax-return', () => {
       page.saveButtonEl.click()
         .then(() => {
-          expect(element.all(by.css('heroes-list li hero-tax-return')).count()).toBe(0);
+          expect(element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0);
         });
     });
 
@@ -82,7 +82,7 @@ describe('Hierarchical dependency injection', () => {
 
   describe('Villains Scenario', () => {
     it('should list multiple villains', () => {
-      expect(element.all(by.css('villains-list li')).count()).toBeGreaterThan(1);
+      expect(element.all(by.css('app-villains-list li')).count()).toBeGreaterThan(1);
     });
   });
 
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/app.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/app.component.ts
index 34b5dd0a5a7..ad9d08fa64d 100644
--- a/aio/content/examples/hierarchical-dependency-injection/src/app/app.component.ts
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <label><input type="checkbox" [checked]="showHeroes"   (change)="showHeroes=!showHeroes">Heroes</label>
     <label><input type="checkbox" [checked]="showVillains" (change)="showVillains=!showVillains">Villains</label>
@@ -9,9 +9,9 @@ import { Component } from '@angular/core';
 
     <h1>Hierarchical Dependency Injection</h1>
 
-    <heroes-list   *ngIf="showHeroes"></heroes-list>
-    <villains-list *ngIf="showVillains"></villains-list>
-    <my-cars       *ngIf="showCars"></my-cars>
+    <app-heroes-list   *ngIf="showHeroes"></app-heroes-list>
+    <app-villains-list *ngIf="showVillains"></app-villains-list>
+    <app-cars       *ngIf="showCars"></app-cars>
   `
 })
 export class AppComponent {
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/car.components.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/car.components.ts
index 5b4df196960..259f54b9a4a 100644
--- a/aio/content/examples/hierarchical-dependency-injection/src/app/car.components.ts
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/car.components.ts
@@ -54,7 +54,7 @@ export class ACarComponent {
 }
 ////////// CarsComponent ////////////
 @Component({
-  selector: 'my-cars',
+  selector: 'app-cars',
   template: `
   <h3>Cars</h3>
   <a-car></a-car>`
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts
index ad8e0153d95..0696e5f96b4 100644
--- a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts
@@ -4,7 +4,7 @@ import { HeroTaxReturn }        from './hero';
 import { HeroTaxReturnService } from './hero-tax-return.service';
 
 @Component({
-  selector: 'hero-tax-return',
+  selector: 'app-hero-tax-return',
   templateUrl: './hero-tax-return.component.html',
   styleUrls: [ './hero-tax-return.component.css' ],
   // #docregion providers
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts
index 36cb5ec1c3a..65525fd4947 100644
--- a/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts
@@ -6,7 +6,7 @@ import { Hero, HeroTaxReturn } from './hero';
 import { HeroesService }       from './heroes.service';
 
 @Component({
-  selector: 'heroes-list',
+  selector: 'app-heroes-list',
   template: `
     <div>
       <h3>Hero Tax Returns</h3>
@@ -15,11 +15,11 @@ import { HeroesService }       from './heroes.service';
             (click)="showTaxReturn(hero)">{{hero.name}}
         </li>
       </ul>
-      <hero-tax-return
+      <app-hero-tax-return
         *ngFor="let selected of selectedTaxReturns; let i = index"
         [taxReturn]="selected"
         (close)="closeTaxReturn(i)">
-      </hero-tax-return>
+      </app-hero-tax-return>
     </div>
     `,
   styles: [ 'li {cursor: pointer;}' ]
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts
index 5226d4f2a9a..c62117f7bc8 100644
--- a/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/villains-list.component.ts
@@ -6,7 +6,7 @@ import { Villain, VillainsService } from './villains.service';
 
 // #docregion metadata
 @Component({
-  selector: 'villains-list',
+  selector: 'app-villains-list',
   templateUrl: './villains-list.component.html',
   providers: [ VillainsService ]
 })
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/index.html b/aio/content/examples/hierarchical-dependency-injection/src/index.html
index 0ea32679e63..dd35fec6aed 100644
--- a/aio/content/examples/hierarchical-dependency-injection/src/index.html
+++ b/aio/content/examples/hierarchical-dependency-injection/src/index.html
@@ -1,26 +1,14 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Hierarchical Injectors</title>
     <base href="/">
     <meta charset="UTF-8">
     <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>
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/main.ts b/aio/content/examples/hierarchical-dependency-injection/src/main.ts
index 6b6532d428a..0740658908d 100644
--- a/aio/content/examples/hierarchical-dependency-injection/src/main.ts
+++ b/aio/content/examples/hierarchical-dependency-injection/src/main.ts
@@ -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);
diff --git a/aio/content/examples/http/src/index.html b/aio/content/examples/http/src/index.html
index 5c51f21c910..78c7b7127e7 100644
--- a/aio/content/examples/http/src/index.html
+++ b/aio/content/examples/http/src/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!-- #docregion -->
-<html>
+<html lang="en">
   <head>
     <title>Angular Http Demo</title>
     <base href="/">
@@ -21,7 +21,7 @@
   </head>
 
   <body>
-      <my-app>Loading...</my-app>
+      <my-app></my-app>
   </body>
 
 </html>
diff --git a/aio/content/examples/lifecycle-hooks/e2e-spec.ts b/aio/content/examples/lifecycle-hooks/e2e/app.e2e-spec.ts
similarity index 97%
rename from aio/content/examples/lifecycle-hooks/e2e-spec.ts
rename to aio/content/examples/lifecycle-hooks/e2e/app.e2e-spec.ts
index 003f8f68f25..80649e801f1 100644
--- a/aio/content/examples/lifecycle-hooks/e2e-spec.ts
+++ b/aio/content/examples/lifecycle-hooks/e2e/app.e2e-spec.ts
@@ -86,7 +86,7 @@ describe('Lifecycle hooks', function () {
     let buttonEle = parentEle.element(by.tagName('button')); // Reset
     let commentEle = parentEle.element(by.className('comment'));
     let logEles = parentEle.all(by.css('h4 ~ div'));
-    let childViewInputEle = parentEle.element(by.css('my-child-view input'));
+    let childViewInputEle = parentEle.element(by.css('app-child-view input'));
     let logCount: number;
 
     expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
@@ -118,7 +118,7 @@ describe('Lifecycle hooks', function () {
     let buttonEle = parentEle.element(by.tagName('button')); // Reset
     let commentEle = parentEle.element(by.className('comment'));
     let logEles = parentEle.all(by.css('h4 ~ div'));
-    let childViewInputEle = parentEle.element(by.css('my-child input'));
+    let childViewInputEle = parentEle.element(by.css('app-child input'));
     let logCount: number;
 
     expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
@@ -165,7 +165,7 @@ describe('Lifecycle hooks', function () {
   it('should support "spy counter"', function () {
     let updateCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Update'));
     let resetCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Reset'));
-    let textEle = element(by.css('counter-parent my-counter > div'));
+    let textEle = element(by.css('counter-parent app-counter > div'));
     let logEles = element.all(by.css('counter-parent h4 ~ div'));
     expect(textEle.getText()).toContain('Counter = 0');
     expect(logEles.count()).toBe(2, 'should start with two log entries');
diff --git a/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts b/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts
index dfd2b80d24b..07545396176 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/after-content.component.ts
@@ -6,7 +6,7 @@ import { LoggerService }  from './logger.service';
 
 //////////////////
 @Component({
-  selector: 'my-child',
+  selector: 'app-child',
   template: '<input [(ngModel)]="hero">'
 })
 export class ChildComponent {
@@ -86,7 +86,7 @@ export class AfterContentComponent implements AfterContentChecked, AfterContentI
     <div *ngIf="show">` +
 // #docregion parent-template
      `<after-content>
-        <my-child></my-child>
+        <app-child></app-child>
       </after-content>`
 // #enddocregion parent-template
 + `</div>
diff --git a/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts b/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts
index 71310e4530f..571878d03fd 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/after-view.component.ts
@@ -7,7 +7,7 @@ import { LoggerService }  from './logger.service';
 //////////////////
 // #docregion child-view
 @Component({
-  selector: 'my-child-view',
+  selector: 'app-child-view',
   template: '<input [(ngModel)]="hero">'
 })
 export class ChildViewComponent {
@@ -21,7 +21,7 @@ export class ChildViewComponent {
 // #docregion template
   template: `
     <div>-- child view begins --</div>
-      <my-child-view></my-child-view>
+      <app-child-view></app-child-view>
     <div>-- child view ends --</div>`
 // #enddocregion template
    + `
diff --git a/aio/content/examples/lifecycle-hooks/src/app/app.component.ts b/aio/content/examples/lifecycle-hooks/src/app/app.component.ts
index 5bd535a1135..7b3cf496f14 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/app.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/app.component.ts
@@ -1,7 +1,7 @@
 // #docregion
 import { Component } from '@angular/core';
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent { }
diff --git a/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
index 8efd1fbd521..7ede5ac5505 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
+++ b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts
@@ -7,7 +7,7 @@ import {
 import { LoggerService }  from './logger.service';
 
 @Component({
-  selector: 'my-counter',
+  selector: 'app-counter',
   template: `
   <div class="counter">
     Counter = {{counter}}
@@ -49,7 +49,7 @@ export class MyCounterComponent implements OnChanges {
     <button (click)="updateCounter()">Update counter</button>
     <button (click)="reset()">Reset Counter</button>
 
-    <my-counter [counter]="value"></my-counter>
+    <app-counter [counter]="value"></app-counter>
 
     <h4>-- Spy Lifecycle Hook Log --</h4>
     <div *ngFor="let msg of spyLog">{{msg}}</div>
diff --git a/aio/content/examples/lifecycle-hooks/src/sample.css b/aio/content/examples/lifecycle-hooks/src/assets/sample.css
similarity index 100%
rename from aio/content/examples/lifecycle-hooks/src/sample.css
rename to aio/content/examples/lifecycle-hooks/src/assets/sample.css
diff --git a/aio/content/examples/lifecycle-hooks/src/index.html b/aio/content/examples/lifecycle-hooks/src/index.html
index cf7059f7803..7446c1feb57 100644
--- a/aio/content/examples/lifecycle-hooks/src/index.html
+++ b/aio/content/examples/lifecycle-hooks/src/index.html
@@ -1,28 +1,16 @@
 <!DOCTYPE html>
 <!-- #docregion -->
-<html>
+<html lang="en">
   <head>
     <title>Angular Lifecycle Hooks</title>
     <base href="/">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="sample.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>
+    <link rel="stylesheet" href="assets/sample.css">
   </head>
 
   <body>
-    <my-app>Loading...</my-app>
+    <app-root></app-root>
   </body>
 
 </html>
diff --git a/aio/content/examples/lifecycle-hooks/src/main.ts b/aio/content/examples/lifecycle-hooks/src/main.ts
index f22933ba8ed..a9ca1caf8ce 100644
--- a/aio/content/examples/lifecycle-hooks/src/main.ts
+++ b/aio/content/examples/lifecycle-hooks/src/main.ts
@@ -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);
diff --git a/aio/content/examples/ngcontainer/src/index.html b/aio/content/examples/ngcontainer/src/index.html
index fc5ff417c3e..38a7c1dff1c 100644
--- a/aio/content/examples/ngcontainer/src/index.html
+++ b/aio/content/examples/ngcontainer/src/index.html
@@ -1,24 +1,10 @@
 <!DOCTYPE html>
 <!-- #docregion -->
-<html>
+<html lang="en">
   <head>
     <title>Angular &lt;ng-container&gt;</title>
     <meta charset="UTF-8">
     <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-apps>
   </body>
diff --git a/aio/content/examples/ngcontainer/src/main.ts b/aio/content/examples/ngcontainer/src/main.ts
index 105b06712d1..0740658908d 100644
--- a/aio/content/examples/ngcontainer/src/main.ts
+++ b/aio/content/examples/ngcontainer/src/main.ts
@@ -1,6 +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);
-
diff --git a/aio/content/examples/ngmodule/e2e-spec.ts b/aio/content/examples/ngmodule/e2e/app.e2e-spec.ts
similarity index 84%
rename from aio/content/examples/ngmodule/e2e-spec.ts
rename to aio/content/examples/ngmodule/e2e/app.e2e-spec.ts
index 61135846267..e3370efd1b4 100644
--- a/aio/content/examples/ngmodule/e2e-spec.ts
+++ b/aio/content/examples/ngmodule/e2e/app.e2e-spec.ts
@@ -173,51 +173,51 @@ describe('NgModule', function () {
     });
   });
 
-  describe('index.0.html', function() {
-    beforeEach(function () {
-      browser.get('index.0.html');
-    });
+  // describe('index.0.html', function() {
+  //   beforeEach(function () {
+  //     browser.get('index.0.html');
+  //   });
 
-    it('has a title', function () {
-      const title = element.all(by.tagName('h1')).get(0);
-      expect(title.getText()).toBe('Minimal NgModule');
-    });
-  });
+  //   it('has a title', function () {
+  //     const title = element.all(by.tagName('h1')).get(0);
+  //     expect(title.getText()).toBe('Minimal NgModule');
+  //   });
+  // });
 
-  describe('index.1.html', function () {
-    beforeEach(function () {
-      browser.get('index.1.html');
-    });
+  // describe('index.1.html', function () {
+  //   beforeEach(function () {
+  //     browser.get('index.1.html');
+  //   });
 
-    describe('app-title', appTitleTests(powderblue));
-  });
+  //   describe('app-title', appTitleTests(powderblue));
+  // });
 
-  describe('index.1b.html', function () {
-    beforeEach(function () {
-      browser.get('index.1b.html');
-    });
+  // describe('index.1b.html', function () {
+  //   beforeEach(function () {
+  //     browser.get('index.1b.html');
+  //   });
 
-    describe('app-title', appTitleTests(powderblue));
+  //   describe('app-title', appTitleTests(powderblue));
 
-    describe('contact', contactTests(powderblue));
-  });
+  //   describe('contact', contactTests(powderblue));
+  // });
 
-  describe('index.2.html', function () {
-    beforeEach(function () {
-      browser.get('index.2.html');
-    });
+  // describe('index.2.html', function () {
+  //   beforeEach(function () {
+  //     browser.get('index.2.html');
+  //   });
 
-    describe('app-title', appTitleTests(gold));
+  //   describe('app-title', appTitleTests(gold));
 
-    describe('contact', contactTests(powderblue));
-  });
+  //   describe('contact', contactTests(powderblue));
+  // });
 
-  describe('index.3.html', function () {
-    beforeEach(function () {
-      browser.get('index.3.html');
-    });
+  // describe('index.3.html', function () {
+  //   beforeEach(function () {
+  //     browser.get('index.3.html');
+  //   });
 
-    describe('app-title', appTitleTests(gold));
-  });
+  //   describe('app-title', appTitleTests(gold));
+  // });
 
 });
diff --git a/aio/content/examples/ngmodule/src/app/app.component.0.ts b/aio/content/examples/ngmodule/src/app/app.component.0.ts
index 4977890c3b5..50243d3fce4 100644
--- a/aio/content/examples/ngmodule/src/app/app.component.0.ts
+++ b/aio/content/examples/ngmodule/src/app/app.component.0.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: '<h1>{{title}}</h1>',
 })
 export class AppComponent {
diff --git a/aio/content/examples/ngmodule/src/app/app.component.1.ts b/aio/content/examples/ngmodule/src/app/app.component.1.ts
index ccf44d44168..a0b22b82704 100644
--- a/aio/content/examples/ngmodule/src/app/app.component.1.ts
+++ b/aio/content/examples/ngmodule/src/app/app.component.1.ts
@@ -3,7 +3,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
 // #enddocregion
   /*
   // #docregion template
diff --git a/aio/content/examples/ngmodule/src/app/app.component.1b.ts b/aio/content/examples/ngmodule/src/app/app.component.1b.ts
index 291bf0ac6b0..48447bb9666 100644
--- a/aio/content/examples/ngmodule/src/app/app.component.1b.ts
+++ b/aio/content/examples/ngmodule/src/app/app.component.1b.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   // #docregion template
   template: `
     <app-title [subtitle]="subtitle"></app-title>
diff --git a/aio/content/examples/ngmodule/src/app/app.component.2.ts b/aio/content/examples/ngmodule/src/app/app.component.2.ts
index a68b7d337d5..4c6d3ba1130 100644
--- a/aio/content/examples/ngmodule/src/app/app.component.2.ts
+++ b/aio/content/examples/ngmodule/src/app/app.component.2.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <app-title [subtitle]="subtitle"></app-title>
     <app-contact></app-contact>
diff --git a/aio/content/examples/ngmodule/src/app/app.component.3.ts b/aio/content/examples/ngmodule/src/app/app.component.3.ts
index 6d69a56f703..e6c9a937549 100644
--- a/aio/content/examples/ngmodule/src/app/app.component.3.ts
+++ b/aio/content/examples/ngmodule/src/app/app.component.3.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   // #docregion template
   template: `
     <app-title [subtitle]="subtitle"></app-title>
diff --git a/aio/content/examples/ngmodule/src/app/app.component.ts b/aio/content/examples/ngmodule/src/app/app.component.ts
index 67336c8b08a..a7249eedf20 100644
--- a/aio/content/examples/ngmodule/src/app/app.component.ts
+++ b/aio/content/examples/ngmodule/src/app/app.component.ts
@@ -3,7 +3,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <app-title [subtitle]="subtitle"></app-title>
     <nav>
diff --git a/aio/content/examples/ngmodule/src/index.0.html b/aio/content/examples/ngmodule/src/index.0.html
index 2281b9fecb7..0bea26963c6 100644
--- a/aio/content/examples/ngmodule/src/index.0.html
+++ b/aio/content/examples/ngmodule/src/index.0.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <base href="/">
     <title>NgModule Minimal</title>
@@ -19,6 +19,6 @@
   </head>
 
   <body>
-    <my-app>Loading...</my-app>
+    <app-root></app-root>
   </body>
 </html>
diff --git a/aio/content/examples/ngmodule/src/index.1.html b/aio/content/examples/ngmodule/src/index.1.html
index 65f7991a26c..1b0c1f8fb15 100644
--- a/aio/content/examples/ngmodule/src/index.1.html
+++ b/aio/content/examples/ngmodule/src/index.1.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <base href="/">
-    <title>NgModule - Contact</title>
+    <title>NgModule Minimal</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
@@ -19,6 +19,6 @@
   </head>
 
   <body>
-    <my-app>Loading...</my-app>
+    <app-root></app-root>
   </body>
 </html>
diff --git a/aio/content/examples/ngmodule/src/index.1b.html b/aio/content/examples/ngmodule/src/index.1b.html
index b4a89d65491..8d47dd9a0ea 100644
--- a/aio/content/examples/ngmodule/src/index.1b.html
+++ b/aio/content/examples/ngmodule/src/index.1b.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <base href="/">
-    <title>NgModule - Contact</title>
+    <title>NgModule Minimal</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
@@ -19,6 +19,6 @@
   </head>
 
   <body>
-    <my-app>Loading...</my-app>
+    <app-root></app-root>
   </body>
 </html>
diff --git a/aio/content/examples/ngmodule/src/index.2.html b/aio/content/examples/ngmodule/src/index.2.html
index 72c545f1f36..9f552615e75 100644
--- a/aio/content/examples/ngmodule/src/index.2.html
+++ b/aio/content/examples/ngmodule/src/index.2.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <base href="/">
-    <title>NgModule - Contact</title>
+    <title>NgModule Minimal</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
@@ -19,6 +19,6 @@
   </head>
 
   <body>
-    <my-app>Loading...</my-app>
+    <app-root></app-root>
   </body>
 </html>
diff --git a/aio/content/examples/ngmodule/src/index.3.html b/aio/content/examples/ngmodule/src/index.3.html
index ec55dd984e1..0fcae8a39f2 100644
--- a/aio/content/examples/ngmodule/src/index.3.html
+++ b/aio/content/examples/ngmodule/src/index.3.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <base href="/">
-    <title>NgModule - Contact</title>
+    <title>NgModule Minimal</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
@@ -19,6 +19,6 @@
   </head>
 
   <body>
-    <my-app>Loading...</my-app>
+    <app-root></app-root>
   </body>
 </html>
diff --git a/aio/content/examples/ngmodule/src/index.html b/aio/content/examples/ngmodule/src/index.html
index 9fc50c02a50..cb62943973d 100644
--- a/aio/content/examples/ngmodule/src/index.html
+++ b/aio/content/examples/ngmodule/src/index.html
@@ -1,25 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <base href="/">
     <title>NgModule Deluxe</title>
     <meta charset="UTF-8">
     <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>
diff --git a/aio/content/examples/ngmodule/src/main.0.ts b/aio/content/examples/ngmodule/src/main.0.ts
index 6d1d712f07f..ed431adb1a2 100644
--- a/aio/content/examples/ngmodule/src/main.0.ts
+++ b/aio/content/examples/ngmodule/src/main.0.ts
@@ -1,4 +1,11 @@
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }             from './app/app.module.0';
+
+import { AppModule } from './app/app.module.0';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
 
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ngmodule/src/main.1.ts b/aio/content/examples/ngmodule/src/main.1.ts
index 48129f4cc9a..1b8a7705260 100644
--- a/aio/content/examples/ngmodule/src/main.1.ts
+++ b/aio/content/examples/ngmodule/src/main.1.ts
@@ -1,4 +1,11 @@
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }             from './app/app.module.1';
+
+import { AppModule } from './app/app.module.1';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
 
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ngmodule/src/main.1b.ts b/aio/content/examples/ngmodule/src/main.1b.ts
index 7a7bfae22fe..a0095ac64dd 100644
--- a/aio/content/examples/ngmodule/src/main.1b.ts
+++ b/aio/content/examples/ngmodule/src/main.1b.ts
@@ -1,4 +1,11 @@
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }             from './app/app.module.1b';
+
+import { AppModule } from './app/app.module.1b';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
 
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ngmodule/src/main.2.ts b/aio/content/examples/ngmodule/src/main.2.ts
index c535e2e7750..4349ed7403c 100644
--- a/aio/content/examples/ngmodule/src/main.2.ts
+++ b/aio/content/examples/ngmodule/src/main.2.ts
@@ -1,4 +1,11 @@
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }             from './app/app.module.2';
+
+import { AppModule } from './app/app.module.2';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
 
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ngmodule/src/main.3.ts b/aio/content/examples/ngmodule/src/main.3.ts
index 72f21dd1421..633b21147f7 100644
--- a/aio/content/examples/ngmodule/src/main.3.ts
+++ b/aio/content/examples/ngmodule/src/main.3.ts
@@ -1,4 +1,11 @@
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }             from './app/app.module.3';
+
+import { AppModule } from './app/app.module.3';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
 
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/ngmodule/src/main.ts b/aio/content/examples/ngmodule/src/main.ts
index c8424d8c4cf..0740658908d 100644
--- a/aio/content/examples/ngmodule/src/main.ts
+++ b/aio/content/examples/ngmodule/src/main.ts
@@ -1,9 +1,12 @@
 // #docregion
-// The browser platform with a compiler
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-// The app module
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
 
-// Compile and launch the module
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/pipes/e2e-spec.ts b/aio/content/examples/pipes/e2e/app.e2e-spec.ts
similarity index 64%
rename from aio/content/examples/pipes/e2e-spec.ts
rename to aio/content/examples/pipes/e2e/app.e2e-spec.ts
index 9675b66367c..195b02649bc 100644
--- a/aio/content/examples/pipes/e2e-spec.ts
+++ b/aio/content/examples/pipes/e2e/app.e2e-spec.ts
@@ -10,26 +10,26 @@ describe('Pipes', function () {
 
   it('should open correctly', function () {
     expect(element.all(by.tagName('h1')).get(0).getText()).toEqual('Pipes');
-    expect(element(by.css('hero-birthday p')).getText()).toEqual(`The hero's birthday is Apr 15, 1988`);
+    expect(element(by.css('app-hero-birthday p')).getText()).toEqual(`The hero's birthday is Apr 15, 1988`);
   });
 
   it('should show 4 heroes', function () {
-    expect(element.all(by.css('hero-list div')).count()).toEqual(4);
+    expect(element.all(by.css('app-hero-list div')).count()).toEqual(4);
   });
 
   it('should show a familiar hero in json', function () {
-    expect(element(by.cssContainingText('hero-list p', 'Heroes as JSON')).getText()).toContain('Bombasto');
+    expect(element(by.cssContainingText('app-hero-list p', 'Heroes as JSON')).getText()).toContain('Bombasto');
   });
 
   it('should show alternate birthday formats', function () {
-    expect(element(by.cssContainingText('my-app > p', `The hero's birthday is Apr 15, 1988`)).isDisplayed()).toBe(true);
-    expect(element(by.cssContainingText('my-app > p', `The hero's birthday is 04/15/88`)).isDisplayed()).toBe(true);
+    expect(element(by.cssContainingText('app-root > p', `The hero's birthday is Apr 15, 1988`)).isDisplayed()).toBe(true);
+    expect(element(by.cssContainingText('app-root > p', `The hero's birthday is 04/15/88`)).isDisplayed()).toBe(true);
   });
 
   it('should be able to toggle birthday formats', function () {
-    let birthDayEle = element(by.css('hero-birthday2 > p'));
+    let birthDayEle = element(by.css('app-hero-birthday2 > p'));
     expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/88`);
-    let buttonEle = element(by.cssContainingText('hero-birthday2 > button', 'Toggle Format'));
+    let buttonEle = element(by.cssContainingText('app-hero-birthday2 > button', 'Toggle Format'));
     expect(buttonEle.isDisplayed()).toBe(true);
     buttonEle.click().then(function() {
       expect(birthDayEle.getText()).toEqual(`The hero's birthday is Friday, April 15, 1988`);
@@ -37,7 +37,7 @@ describe('Pipes', function () {
   });
 
   it('should be able to chain and compose pipes', function () {
-    let chainedPipeEles = element.all(by.cssContainingText('my-app p', `The chained hero's`));
+    let chainedPipeEles = element.all(by.cssContainingText('app-root p', `The chained hero's`));
     expect(chainedPipeEles.count()).toBe(3, 'should have 3 chained pipe examples');
     expect(chainedPipeEles.get(0).getText()).toContain('APR 15, 1988');
     expect(chainedPipeEles.get(1).getText()).toContain('FRIDAY, APRIL 15, 1988');
@@ -45,15 +45,15 @@ describe('Pipes', function () {
   });
 
   it('should be able to use ExponentialStrengthPipe pipe', function () {
-    let ele = element(by.css('power-booster p'));
+    let ele = element(by.css('app-power-booster p'));
     expect(ele.getText()).toContain('Super power boost: 1024');
   });
 
   it('should be able to use the exponential calculator', function () {
-    let eles = element.all(by.css('power-boost-calculator input'));
+    let eles = element.all(by.css('app-power-boost-calculator input'));
     let baseInputEle = eles.get(0);
     let factorInputEle = eles.get(1);
-    let outputEle = element(by.css('power-boost-calculator p'));
+    let outputEle = element(by.css('app-power-boost-calculator p'));
     baseInputEle.clear().then(function() {
       baseInputEle.sendKeys('7');
       return factorInputEle.clear();
@@ -65,11 +65,11 @@ describe('Pipes', function () {
 
 
   it('should support flying heroes (pure) ', function () {
-    let nameEle = element(by.css('flying-heroes input[type="text"]'));
-    let canFlyCheckEle = element(by.css('flying-heroes #can-fly'));
-    let mutateCheckEle = element(by.css('flying-heroes #mutate'));
-    let resetEle = element(by.css('flying-heroes button'));
-    let flyingHeroesEle = element.all(by.css('flying-heroes #flyers div'));
+    let nameEle = element(by.css('app-flying-heroes input[type="text"]'));
+    let canFlyCheckEle = element(by.css('app-flying-heroes #can-fly'));
+    let mutateCheckEle = element(by.css('app-flying-heroes #mutate'));
+    let resetEle = element(by.css('app-flying-heroes button'));
+    let flyingHeroesEle = element.all(by.css('app-flying-heroes #flyers div'));
 
     expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
     expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
@@ -91,10 +91,10 @@ describe('Pipes', function () {
 
 
   it('should support flying heroes (impure) ', function () {
-    let nameEle = element(by.css('flying-heroes-impure input[type="text"]'));
-    let canFlyCheckEle = element(by.css('flying-heroes-impure #can-fly'));
-    let mutateCheckEle = element(by.css('flying-heroes-impure #mutate'));
-    let flyingHeroesEle = element.all(by.css('flying-heroes-impure #flyers div'));
+    let nameEle = element(by.css('app-flying-heroes-impure input[type="text"]'));
+    let canFlyCheckEle = element(by.css('app-flying-heroes-impure #can-fly'));
+    let mutateCheckEle = element(by.css('app-flying-heroes-impure #mutate'));
+    let flyingHeroesEle = element.all(by.css('app-flying-heroes-impure #flyers div'));
 
     expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"');
     expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array');
@@ -105,7 +105,7 @@ describe('Pipes', function () {
   });
 
   it('should show an async hero message', function () {
-    expect(element.all(by.tagName('hero-message')).get(0).getText()).toContain('hero');
+    expect(element.all(by.tagName('app-hero-message')).get(0).getText()).toContain('hero');
   });
 
 });
diff --git a/aio/content/examples/pipes/src/app/app.component.html b/aio/content/examples/pipes/src/app/app.component.html
index a27d587fcd4..b03b8251bc5 100644
--- a/aio/content/examples/pipes/src/app/app.component.html
+++ b/aio/content/examples/pipes/src/app/app.component.html
@@ -15,7 +15,7 @@
 <hr>
 <a id="happy-birthday1"></a>
 <h2>Hero Birthday v1</h2>
-<hero-birthday></hero-birthday>
+<app-hero-birthday></app-hero-birthday>
 
 <hr>
 <a id="birthday-date-pipe"></a>
@@ -31,7 +31,7 @@
 <hr>
 <a id="happy-birthday2"></a>
 <h2>Hero Birthday v2</h2>
-<hero-birthday2></hero-birthday2>
+<app-hero-birthday2></app-hero-birthday2>
 
 <hr>
 <a id="birthday-pipe-chaining"></a>
@@ -57,27 +57,27 @@
 </p>
 <hr>
 <a id="power-booster"></a>
-<power-booster></power-booster>
+<app-power-booster></app-power-booster>
 
 <hr>
 <a id="power-boost-calc"></a>
-<power-boost-calculator>loading</power-boost-calculator>
+<app-power-boost-calculator>loading</app-power-boost-calculator>
 
 <hr>
 <a id="flying-heroes"></a>
-<flying-heroes></flying-heroes>
+<app-flying-heroes></app-flying-heroes>
 
 <hr>
 <a id="flying-heroes-impure"></a>
-<flying-heroes-impure></flying-heroes-impure>
+<app-flying-heroes-impure></app-flying-heroes-impure>
 
 <hr>
 <a id="hero-message"></a>
 <!-- async examples at the top so can see them in action -->
-<hero-message></hero-message>
+<app-hero-message></app-hero-message>
 
 <hr>
 <a id="hero-list"></a>
-<hero-list></hero-list>
+<app-hero-list></app-hero-list>
 
 <div style="margin-top:12em;"></div>
diff --git a/aio/content/examples/pipes/src/app/app.component.ts b/aio/content/examples/pipes/src/app/app.component.ts
index 090eae77664..2b739ed2a0c 100644
--- a/aio/content/examples/pipes/src/app/app.component.ts
+++ b/aio/content/examples/pipes/src/app/app.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent {
diff --git a/aio/content/examples/pipes/src/app/flying-heroes.component.ts b/aio/content/examples/pipes/src/app/flying-heroes.component.ts
index e4abb09a2fc..43474c5ba88 100644
--- a/aio/content/examples/pipes/src/app/flying-heroes.component.ts
+++ b/aio/content/examples/pipes/src/app/flying-heroes.component.ts
@@ -5,7 +5,7 @@ import { Component }              from '@angular/core';
 import { HEROES }                 from './heroes';
 
 @Component({
-  selector: 'flying-heroes',
+  selector: 'app-flying-heroes',
   templateUrl: './flying-heroes.component.html',
   styles: ['#flyers, #all {font-style: italic}']
 })
@@ -49,7 +49,7 @@ export class FlyingHeroesComponent {
 ////// Identical except for impure pipe //////
 // #docregion impure-component
 @Component({
-  selector: 'flying-heroes-impure',
+  selector: 'app-flying-heroes-impure',
   templateUrl: './flying-heroes-impure.component.html',
 // #enddocregion impure-component
   styles: ['.flyers, .all {font-style: italic}'],
diff --git a/aio/content/examples/pipes/src/app/hero-async-message.component.ts b/aio/content/examples/pipes/src/app/hero-async-message.component.ts
index d5bbd9fb0e6..3435b3e1cc4 100644
--- a/aio/content/examples/pipes/src/app/hero-async-message.component.ts
+++ b/aio/content/examples/pipes/src/app/hero-async-message.component.ts
@@ -7,7 +7,7 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/take';
 
 @Component({
-  selector: 'hero-message',
+  selector: 'app-hero-message',
   template: `
     <h2>Async Hero Message and AsyncPipe</h2>
     <p>Message: {{ message$ | async }}</p>
diff --git a/aio/content/examples/pipes/src/app/hero-birthday1.component.ts b/aio/content/examples/pipes/src/app/hero-birthday1.component.ts
index a670a807a8a..d51914550f6 100644
--- a/aio/content/examples/pipes/src/app/hero-birthday1.component.ts
+++ b/aio/content/examples/pipes/src/app/hero-birthday1.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'hero-birthday',
+  selector: 'app-hero-birthday',
   // #docregion hero-birthday-template
   template: `<p>The hero's birthday is {{ birthday | date }}</p>`
   // #enddocregion hero-birthday-template
diff --git a/aio/content/examples/pipes/src/app/hero-birthday2.component.ts b/aio/content/examples/pipes/src/app/hero-birthday2.component.ts
index 87481aa1213..ce71c2ab1ee 100644
--- a/aio/content/examples/pipes/src/app/hero-birthday2.component.ts
+++ b/aio/content/examples/pipes/src/app/hero-birthday2.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'hero-birthday2',
+  selector: 'app-hero-birthday2',
   // #docregion template
   template: `
     <p>The hero's birthday is {{ birthday | date:format }}</p>
diff --git a/aio/content/examples/pipes/src/app/hero-list.component.ts b/aio/content/examples/pipes/src/app/hero-list.component.ts
index df231120cea..ead6e74d57d 100644
--- a/aio/content/examples/pipes/src/app/hero-list.component.ts
+++ b/aio/content/examples/pipes/src/app/hero-list.component.ts
@@ -2,16 +2,16 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'hero-list',
+  selector: 'app-hero-list',
   template: `
     <h2>Heroes from JSON File</h2>
 
-    <div *ngFor="let hero of ('heroes.json' | fetch) ">
+    <div *ngFor="let hero of ('assets/heroes.json' | fetch) ">
       {{hero.name}}
     </div>
 
     <p>Heroes as JSON:
-      {{'heroes.json' | fetch | json}}
+      {{'assets/heroes.json' | fetch | json}}
     </p>`
 })
 export class HeroListComponent { }
diff --git a/aio/content/examples/pipes/src/app/power-boost-calculator.component.ts b/aio/content/examples/pipes/src/app/power-boost-calculator.component.ts
index e65e29ad4ce..5092e188931 100644
--- a/aio/content/examples/pipes/src/app/power-boost-calculator.component.ts
+++ b/aio/content/examples/pipes/src/app/power-boost-calculator.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'power-boost-calculator',
+  selector: 'app-power-boost-calculator',
   template: `
     <h2>Power Boost Calculator</h2>
     <div>Normal power: <input [(ngModel)]="power"></div>
diff --git a/aio/content/examples/pipes/src/app/power-booster.component.ts b/aio/content/examples/pipes/src/app/power-booster.component.ts
index 08e3e24c7ba..b8d395db0f1 100644
--- a/aio/content/examples/pipes/src/app/power-booster.component.ts
+++ b/aio/content/examples/pipes/src/app/power-booster.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'power-booster',
+  selector: 'app-power-booster',
   template: `
     <h2>Power Booster</h2>
     <p>Super power boost: {{2 | exponentialStrength: 10}}</p>
diff --git a/aio/content/examples/pipes/src/heroes.json b/aio/content/examples/pipes/src/assets/heroes.json
similarity index 100%
rename from aio/content/examples/pipes/src/heroes.json
rename to aio/content/examples/pipes/src/assets/heroes.json
diff --git a/aio/content/examples/pipes/src/index.html b/aio/content/examples/pipes/src/index.html
index fedb5c2e5ec..35002638959 100644
--- a/aio/content/examples/pipes/src/index.html
+++ b/aio/content/examples/pipes/src/index.html
@@ -1,26 +1,14 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Pipes</title>
     <base href="/">
     <meta charset="UTF-8">
     <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>my-app loading ...</my-app>
+    <app-root></app-root>
   </body>
 
 </html>
diff --git a/aio/content/examples/pipes/src/main.ts b/aio/content/examples/pipes/src/main.ts
index 6b6532d428a..0740658908d 100644
--- a/aio/content/examples/pipes/src/main.ts
+++ b/aio/content/examples/pipes/src/main.ts
@@ -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);
diff --git a/aio/content/examples/reactive-forms/e2e-spec.ts b/aio/content/examples/reactive-forms/e2e/app.e2e-spec.ts
similarity index 89%
rename from aio/content/examples/reactive-forms/e2e-spec.ts
rename to aio/content/examples/reactive-forms/e2e/app.e2e-spec.ts
index bb788397ef9..59c1ea797d1 100644
--- a/aio/content/examples/reactive-forms/e2e-spec.ts
+++ b/aio/content/examples/reactive-forms/e2e/app.e2e-spec.ts
@@ -46,7 +46,7 @@ describe('Reactive forms', function() {
 
   describe('final demo', function() {
     it('does not select any hero by default', function() {
-      let heroSection = element(by.css('hero-list > div'));
+      let heroSection = element(by.css('app-hero-list > div'));
       expect(heroSection.isPresent()).toBe(false);
     });
 
@@ -56,7 +56,7 @@ describe('Reactive forms', function() {
       whirlwindButton.click();
       let refresh = element(by.css('button'));
       refresh.click();
-      let heroSection = element(by.css('hero-list > div'));
+      let heroSection = element(by.css('app-hero-list > div'));
       expect(heroSection.isPresent()).toBe(false);
     });
 
@@ -67,7 +67,7 @@ describe('Reactive forms', function() {
       });
 
       it('should show a hero information when the button is clicked', function() {
-        let editMessage = element(by.css('hero-list > div > h3'));
+        let editMessage = element(by.css('app-hero-list > div > h3'));
         expect(editMessage.getText()).toBe('Editing: Whirlwind');
       });
 
@@ -87,7 +87,7 @@ describe('Reactive forms', function() {
       });
 
       it('shows a json output from the form', function() {
-        let json = element(by.css('hero-detail > p'));
+        let json = element(by.css('app-hero-detail > p'));
         expect(json.getText()).toContain('Whirlwind');
         expect(json.getText()).toContain('Anywhere');
         expect(json.getText()).toContain('Somewhere');
@@ -95,7 +95,7 @@ describe('Reactive forms', function() {
       });
 
       it('has two disabled buttons by default', function() {
-        let buttons = element.all(by.css('hero-detail > form > div > button'));
+        let buttons = element.all(by.css('app-hero-detail > form > div > button'));
         expect(buttons.get(0).getAttribute('disabled')).toBe('true');
         expect(buttons.get(1).getAttribute('disabled')).toBe('true');
       });
@@ -103,7 +103,7 @@ describe('Reactive forms', function() {
       it('enables the buttons after we edit the form', function() {
         let nameInput = element(by.css('input[formcontrolname=name]'));
         nameInput.sendKeys('a');
-        let buttons = element.all(by.css('hero-detail > form > div > button'));
+        let buttons = element.all(by.css('app-hero-detail > form > div > button'));
         expect(buttons.get(0).getAttribute('disabled')).toBeNull();
         expect(buttons.get(1).getAttribute('disabled')).toBeNull();
       });
@@ -111,18 +111,18 @@ describe('Reactive forms', function() {
       it('saves the changes when the save button is clicked', function() {
         let nameInput = element(by.css('input[formcontrolname=name]'));
         nameInput.sendKeys('a');
-        let save = element.all(by.css('hero-detail > form > div > button')).get(0);
+        let save = element.all(by.css('app-hero-detail > form > div > button')).get(0);
         save.click();
-        let editMessage = element(by.css('hero-list > div > h3'));
+        let editMessage = element(by.css('app-hero-list > div > h3'));
         expect(editMessage.getText()).toBe('Editing: Whirlwinda');
       });
 
       it('reverts the changes when the revert button is clicked', function() {
         let nameInput = element(by.css('input[formcontrolname=name]'));
         nameInput.sendKeys('a');
-        let revert = element.all(by.css('hero-detail > form > div > button')).get(1);
+        let revert = element.all(by.css('app-hero-detail > form > div > button')).get(1);
         revert.click();
-        let editMessage = element(by.css('hero-list > div > h3'));
+        let editMessage = element(by.css('app-hero-list > div > h3'));
         expect(editMessage.getText()).toBe('Editing: Whirlwind');
         expect(nameInput.getAttribute('value')).toBe('Whirlwind');
       });
@@ -157,7 +157,7 @@ describe('Reactive forms', function() {
       });
 
       it('should show a hero information when the button is clicked', function() {
-        let editMessage = element(by.css('hero-list > div > h3'));
+        let editMessage = element(by.css('app-hero-list > div > h3'));
         expect(editMessage.getText()).toBe('Editing: Bombastic');
       });
 
@@ -172,7 +172,7 @@ describe('Reactive forms', function() {
       });
 
       it('shows a json output from the form', function() {
-        let json = element(by.css('hero-detail > p'));
+        let json = element(by.css('app-hero-detail > p'));
         expect(json.getText()).toContain('Bombastic');
         expect(json.getText()).toContain('Smallville');
         expect(json.getText()).toContain('OH');
@@ -180,7 +180,7 @@ describe('Reactive forms', function() {
       });
 
       it('has two disabled buttons by default', function() {
-        let buttons = element.all(by.css('hero-detail > form > div > button'));
+        let buttons = element.all(by.css('app-hero-detail > form > div > button'));
         expect(buttons.get(0).getAttribute('disabled')).toBe('true');
         expect(buttons.get(1).getAttribute('disabled')).toBe('true');
       });
@@ -188,7 +188,7 @@ describe('Reactive forms', function() {
       it('enables the buttons after we edit the form', function() {
         let nameInput = element(by.css('input[formcontrolname=name]'));
         nameInput.sendKeys('a');
-        let buttons = element.all(by.css('hero-detail > form > div > button'));
+        let buttons = element.all(by.css('app-hero-detail > form > div > button'));
         expect(buttons.get(0).getAttribute('disabled')).toBeNull();
         expect(buttons.get(1).getAttribute('disabled')).toBeNull();
       });
@@ -196,18 +196,18 @@ describe('Reactive forms', function() {
       it('saves the changes when the save button is clicked', function() {
         let nameInput = element(by.css('input[formcontrolname=name]'));
         nameInput.sendKeys('a');
-        let save = element.all(by.css('hero-detail > form > div > button')).get(0);
+        let save = element.all(by.css('app-hero-detail > form > div > button')).get(0);
         save.click();
-        let editMessage = element(by.css('hero-list > div > h3'));
+        let editMessage = element(by.css('app-hero-list > div > h3'));
         expect(editMessage.getText()).toBe('Editing: Bombastica');
       });
 
       it('reverts the changes when the revert button is clicked', function() {
         let nameInput = element(by.css('input[formcontrolname=name]'));
         nameInput.sendKeys('a');
-        let revert = element.all(by.css('hero-detail > form > div > button')).get(1);
+        let revert = element.all(by.css('app-hero-detail > form > div > button')).get(1);
         revert.click();
-        let editMessage = element(by.css('hero-list > div > h3'));
+        let editMessage = element(by.css('app-hero-list > div > h3'));
         expect(editMessage.getText()).toBe('Editing: Bombastic');
         expect(nameInput.getAttribute('value')).toBe('Bombastic');
       });
@@ -243,7 +243,7 @@ describe('Reactive forms', function() {
       });
 
       it('should show hero information when the button is clicked', function() {
-        let editMessage = element(by.css('hero-list > div > h3'));
+        let editMessage = element(by.css('app-hero-list > div > h3'));
         expect(editMessage.getText()).toBe('Editing: Magneta');
       });
 
@@ -253,12 +253,12 @@ describe('Reactive forms', function() {
       });
 
       it('shows a json output from the form', function() {
-        let json = element(by.css('hero-detail > p'));
+        let json = element(by.css('app-hero-detail > p'));
         expect(json.getText()).toContain('Magneta');
       });
 
       it('has two disabled buttons by default', function() {
-        let buttons = element.all(by.css('hero-detail > form > div > button'));
+        let buttons = element.all(by.css('app-hero-detail > form > div > button'));
         expect(buttons.get(0).getAttribute('disabled')).toBe('true');
         expect(buttons.get(1).getAttribute('disabled')).toBe('true');
       });
@@ -266,7 +266,7 @@ describe('Reactive forms', function() {
       it('enables the buttons after we edit the form', function() {
         let nameInput = element(by.css('input[formcontrolname=name]'));
         nameInput.sendKeys('a');
-        let buttons = element.all(by.css('hero-detail > form > div > button'));
+        let buttons = element.all(by.css('app-hero-detail > form > div > button'));
         expect(buttons.get(0).getAttribute('disabled')).toBeNull();
         expect(buttons.get(1).getAttribute('disabled')).toBeNull();
       });
@@ -274,18 +274,18 @@ describe('Reactive forms', function() {
       it('saves the changes when the save button is clicked', function() {
         let nameInput = element(by.css('input[formcontrolname=name]'));
         nameInput.sendKeys('a');
-        let save = element.all(by.css('hero-detail > form > div > button')).get(0);
+        let save = element.all(by.css('app-hero-detail > form > div > button')).get(0);
         save.click();
-        let editMessage = element(by.css('hero-list > div > h3'));
+        let editMessage = element(by.css('app-hero-list > div > h3'));
         expect(editMessage.getText()).toBe('Editing: Magnetaa');
       });
 
       it('reverts the changes when the revert button is clicked', function() {
         let nameInput = element(by.css('input[formcontrolname=name]'));
         nameInput.sendKeys('a');
-        let revert = element.all(by.css('hero-detail > form > div > button')).get(1);
+        let revert = element.all(by.css('app-hero-detail > form > div > button')).get(1);
         revert.click();
-        let editMessage = element(by.css('hero-list > div > h3'));
+        let editMessage = element(by.css('app-hero-list > div > h3'));
         expect(editMessage.getText()).toBe('Editing: Magneta');
         expect(nameInput.getAttribute('value')).toBe('Magneta');
       });
@@ -330,7 +330,7 @@ describe('Reactive forms', function() {
      });
 
     it('does not select any hero by default', function() {
-      let heroSection = element(by.css('hero-list > div'));
+      let heroSection = element(by.css('app-hero-list > div'));
       expect(heroSection.isPresent()).toBe(false);
     });
 
@@ -340,7 +340,7 @@ describe('Reactive forms', function() {
       whirlwindButton.click();
       let refresh = element(by.css('button'));
       refresh.click();
-      let heroSection = element(by.css('hero-list > div'));
+      let heroSection = element(by.css('app-hero-list > div'));
       expect(heroSection.isPresent()).toBe(false);
     });
 
@@ -370,7 +370,7 @@ describe('Reactive forms', function() {
         expect(address2.city).toBe('Somewhere');
       });
       it('shows a json output from the form', function() {
-        let json = element(by.css('hero-detail-8 > p'));
+        let json = element(by.css('app-hero-detail-8 > p'));
         expect(json.getText()).toContain('Whirlwind');
         expect(json.getText()).toContain('Anywhere');
         expect(json.getText()).toContain('Somewhere');
@@ -427,7 +427,7 @@ describe('Reactive forms', function() {
       });
 
       it('shows a json output from the form', function() {
-          let json = element(by.css('hero-detail-8 > p'));
+          let json = element(by.css('app-hero-detail-8 > p'));
           expect(json.getText()).toContain('Bombastic');
           expect(json.getText()).toContain('Smallville');
           expect(json.getText()).toContain('04501');
@@ -475,7 +475,7 @@ describe('Reactive forms', function() {
       });
 
       it('shows a json output from the form', function() {
-          let json = element(by.css('hero-detail-8 > p'));
+          let json = element(by.css('app-hero-detail-8 > p'));
           expect(json.getText()).toContain('Magneta');
         });
 
@@ -521,7 +521,7 @@ describe('Reactive forms', function() {
      });
 
     it('does not select any hero by default', function() {
-      let heroSection = element(by.css('hero-list > div'));
+      let heroSection = element(by.css('app-hero-list > div'));
       expect(heroSection.isPresent()).toBe(false);
     });
 
@@ -531,7 +531,7 @@ describe('Reactive forms', function() {
       whirlwindButton.click();
       let refresh = element(by.css('button'));
       refresh.click();
-      let heroSection = element(by.css('hero-list > div'));
+      let heroSection = element(by.css('app-hero-list > div'));
       expect(heroSection.isPresent()).toBe(false);
     });
 
@@ -557,12 +557,12 @@ describe('Reactive forms', function() {
       });
 
       it('shows a json output from the form', function() {
-        let json = element(by.css('hero-detail-7 > p'));
+        let json = element(by.css('app-hero-detail-7 > p'));
         expect(json.getText()).toContain('Whirlwind');
         expect(json.getText()).toContain('Anywhere');
-        let nameOutput = element(by.css('hero-detail-7 > p ~ p'));
+        let nameOutput = element(by.css('app-hero-detail-7 > p ~ p'));
         expect(nameOutput.getText()).toContain('Name value: Whirlwind');
-        let streetOutput = element(by.css('hero-detail-7 > p ~ p ~ p'));
+        let streetOutput = element(by.css('app-hero-detail-7 > p ~ p ~ p'));
         expect(streetOutput.getText()).toContain('Street value: 123 Main');
       });
 
@@ -602,14 +602,14 @@ describe('Reactive forms', function() {
       });
 
       it('shows a json output from the form', function() {
-          let json = element(by.css('hero-detail-7 > p'));
+          let json = element(by.css('app-hero-detail-7 > p'));
           expect(json.getText()).toContain('Bombastic');
           expect(json.getText()).toContain('Smallville');
           expect(json.getText()).toContain('04501');
           expect(json.getText()).toContain('789 Elm');
-          let nameOutput = element(by.css('hero-detail-7 > p ~ p'));
+          let nameOutput = element(by.css('app-hero-detail-7 > p ~ p'));
           expect(nameOutput.getText()).toContain('Name value: Bombastic');
-          let streetOutput = element(by.css('hero-detail-7 > p ~ p ~ p'));
+          let streetOutput = element(by.css('app-hero-detail-7 > p ~ p ~ p'));
           expect(streetOutput.getText()).toContain('Street value: 789 Elm');
         });
 
@@ -656,11 +656,11 @@ describe('Reactive forms', function() {
       });
 
       it('shows a json output from the form', function() {
-          let json = element(by.css('hero-detail-7 > p'));
+          let json = element(by.css('app-hero-detail-7 > p'));
           expect(json.getText()).toContain('Magneta');
-          let nameOutput = element(by.css('hero-detail-7 > p ~ p'));
+          let nameOutput = element(by.css('app-hero-detail-7 > p ~ p'));
           expect(nameOutput.getText()).toContain('Name value: Magneta');
-          let streetOutput = element(by.css('hero-detail-7 > p ~ p ~ p'));
+          let streetOutput = element(by.css('app-hero-detail-7 > p ~ p ~ p'));
           expect(streetOutput.getText()).toContain('Street value:');
         });
 
@@ -730,11 +730,11 @@ describe('Reactive forms', function() {
       });
 
       it('shows a json output from the form', function() {
-        let json = element(by.css('hero-detail-6 > p'));
+        let json = element(by.css('app-hero-detail-6 > p'));
         expect(json.getText()).toContain('Whirlwind');
-        let nameOutput = element(by.css('hero-detail-6 > p ~ p'));
+        let nameOutput = element(by.css('app-hero-detail-6 > p ~ p'));
         expect(nameOutput.getText()).toContain('Name value: Whirlwind');
-        let streetOutput = element(by.css('hero-detail-6 > p ~ p ~ p'));
+        let streetOutput = element(by.css('app-hero-detail-6 > p ~ p ~ p'));
         expect(streetOutput.getText()).toContain('Street value:');
       });
 
@@ -774,11 +774,11 @@ describe('Reactive forms', function() {
       });
 
       it('shows a json output from the form', function() {
-        let json = element(by.css('hero-detail-6 > p'));
+        let json = element(by.css('app-hero-detail-6 > p'));
         expect(json.getText()).toContain('Bombastic');
-        let nameOutput = element(by.css('hero-detail-6 > p ~ p'));
+        let nameOutput = element(by.css('app-hero-detail-6 > p ~ p'));
         expect(nameOutput.getText()).toContain('Name value: Bombastic');
-        let streetOutput = element(by.css('hero-detail-6 > p ~ p ~ p'));
+        let streetOutput = element(by.css('app-hero-detail-6 > p ~ p ~ p'));
         expect(streetOutput.getText()).toContain('Street value:');
       });
     }); // Bombastic patchValue form
@@ -817,11 +817,11 @@ describe('Reactive forms', function() {
       });
 
       it('shows a json output from the form', function() {
-        let json = element(by.css('hero-detail-6 > p'));
+        let json = element(by.css('app-hero-detail-6 > p'));
         expect(json.getText()).toContain('Magneta');
-        let nameOutput = element(by.css('hero-detail-6 > p ~ p'));
+        let nameOutput = element(by.css('app-hero-detail-6 > p ~ p'));
         expect(nameOutput.getText()).toContain('Name value: Magneta');
-        let streetOutput = element(by.css('hero-detail-6 > p ~ p ~ p'));
+        let streetOutput = element(by.css('app-hero-detail-6 > p ~ p ~ p'));
         expect(streetOutput.getText()).toContain('Street value:');
       });
 
@@ -867,11 +867,11 @@ describe('Reactive forms', function() {
     });
 
     it('shows a json output from the form', function() {
-      let json = element(by.css('hero-detail-5 > p'));
+      let json = element(by.css('app-hero-detail-5 > p'));
       expect(json.getText()).toContain('address');
-      let nameOutput = element(by.css('hero-detail-5 > p ~ p'));
+      let nameOutput = element(by.css('app-hero-detail-5 > p ~ p'));
       expect(nameOutput.getText()).toContain('Name value:');
-      let streetOutput = element(by.css('hero-detail-5 > p ~ p ~ p'));
+      let streetOutput = element(by.css('app-hero-detail-5 > p ~ p ~ p'));
       expect(streetOutput.getText()).toContain('Street value:');
     });
 
@@ -892,7 +892,7 @@ describe('Reactive forms', function() {
      });
 
     it('should show header', function() {
-        let header = element(by.css('hero-detail-4 > h3'));
+        let header = element(by.css('app-hero-detail-4 > h3'));
         expect(header.getText()).toBe('A FormGroup with multiple FormControls');
     });
 
@@ -917,7 +917,7 @@ describe('Reactive forms', function() {
       expect(checkbox.getAttribute('checked')).toBe(null);
     });
     it('shows a json output from the form', function() {
-      let json = element(by.css('hero-detail-4 > p'));
+      let json = element(by.css('app-hero-detail-4 > p'));
       expect(json.getText()).toContain('power');
     });
 
@@ -940,7 +940,7 @@ describe('Reactive forms', function() {
      });
 
     it('should show header', function() {
-        let header = element(by.css('hero-detail-3 > h3'));
+        let header = element(by.css('app-hero-detail-3 > h3'));
         expect(header.getText()).toBe('A FormGroup with a single FormControl using FormBuilder');
     });
 
@@ -950,9 +950,9 @@ describe('Reactive forms', function() {
     });
 
     it('shows a json output from the form', function() {
-      let json = element(by.css('hero-detail-3 > p'));
+      let json = element(by.css('app-hero-detail-3 > p'));
       expect(json.getText()).toContain('name');
-      let validStatus = element(by.css('hero-detail-3 > p ~ p'));
+      let validStatus = element(by.css('app-hero-detail-3 > p ~ p'));
       expect(validStatus.getText()).toContain('INVALID');
     });
 
@@ -974,7 +974,7 @@ describe('Reactive forms', function() {
      });
 
     it('should show header', function() {
-        let header = element(by.css('hero-detail-2 > h3'));
+        let header = element(by.css('app-hero-detail-2 > h3'));
         expect(header.getText()).toBe('FormControl in a FormGroup');
     });
 
@@ -984,7 +984,7 @@ describe('Reactive forms', function() {
     });
 
     it('shows a json output from the form', function() {
-      let json = element(by.css('hero-detail-2 > p'));
+      let json = element(by.css('app-hero-detail-2 > p'));
       expect(json.getText()).toContain('name');
     });
 
@@ -1005,7 +1005,7 @@ describe('Reactive forms', function() {
      });
 
     it('should show header', function() {
-        let header = element(by.css('hero-detail-1 > h3'));
+        let header = element(by.css('app-hero-detail-1 > h3'));
         expect(header.getText()).toBe('Just a FormControl');
     });
 
diff --git a/aio/content/examples/reactive-forms/src/app/app.component.1.ts b/aio/content/examples/reactive-forms/src/app/app.component.1.ts
index 30236183342..1cb532fdfe9 100644
--- a/aio/content/examples/reactive-forms/src/app/app.component.1.ts
+++ b/aio/content/examples/reactive-forms/src/app/app.component.1.ts
@@ -2,11 +2,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
   <div class="container">
     <h1>Reactive Forms</h1>
-    <hero-detail></hero-detail>
+    <app-hero-detail></app-hero-detail>
   </div>`
 })
 export class AppComponent { }
diff --git a/aio/content/examples/reactive-forms/src/app/app.component.ts b/aio/content/examples/reactive-forms/src/app/app.component.ts
index d30a38e979b..cbde762e5fa 100644
--- a/aio/content/examples/reactive-forms/src/app/app.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/app.component.ts
@@ -2,11 +2,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
   <div class="container">
     <h1>Reactive Forms</h1>
-    <hero-list></hero-list>
+    <app-hero-list></app-hero-list>
   </div>`
 })
 export class AppComponent { }
diff --git a/aio/content/examples/reactive-forms/src/app/demo.component.html b/aio/content/examples/reactive-forms/src/app/demo.component.html
index 1caae127af1..369427a7396 100644
--- a/aio/content/examples/reactive-forms/src/app/demo.component.html
+++ b/aio/content/examples/reactive-forms/src/app/demo.component.html
@@ -9,12 +9,12 @@
 <hr>
 
 <div class="demo">
-  <hero-list *ngIf="demo===final"></hero-list>
-  <hero-detail-1 *ngIf="demo===1"></hero-detail-1>
-  <hero-detail-2 *ngIf="demo===2"></hero-detail-2>
-  <hero-detail-3 *ngIf="demo===3"></hero-detail-3>
-  <hero-detail-4 *ngIf="demo===4"></hero-detail-4>
-  <hero-detail-5 *ngIf="demo===5"></hero-detail-5>
+  <app-hero-list *ngIf="demo===final"></app-hero-list>
+  <app-hero-detail-1 *ngIf="demo===1"></app-hero-detail-1>
+  <app-hero-detail-2 *ngIf="demo===2"></app-hero-detail-2>
+  <app-hero-detail-3 *ngIf="demo===3"></app-hero-detail-3>
+  <app-hero-detail-4 *ngIf="demo===4"></app-hero-detail-4>
+  <app-hero-detail-5 *ngIf="demo===5"></app-hero-detail-5>
 
   <div *ngIf="demo >= 6 && demo !== final" >
 
@@ -30,9 +30,9 @@
       <hr>
       <h2>Hero Detail</h2>
       <h3>Editing: {{selectedHero.name}}</h3>
-      <hero-detail-6 [hero]=selectedHero *ngIf="demo===6"></hero-detail-6>
-      <hero-detail-7 [hero]=selectedHero *ngIf="demo===7"></hero-detail-7>
-      <hero-detail-8 [hero]=selectedHero *ngIf="demo===8"></hero-detail-8>
+      <app-hero-detail-6 [hero]=selectedHero *ngIf="demo===6"></app-hero-detail-6>
+      <app-hero-detail-7 [hero]=selectedHero *ngIf="demo===7"></app-hero-detail-7>
+      <app-hero-detail-8 [hero]=selectedHero *ngIf="demo===8"></app-hero-detail-8>
 
     </div>
   </div>
diff --git a/aio/content/examples/reactive-forms/src/app/demo.component.ts b/aio/content/examples/reactive-forms/src/app/demo.component.ts
index 181726eb665..65763e4bd3a 100644
--- a/aio/content/examples/reactive-forms/src/app/demo.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/demo.component.ts
@@ -6,7 +6,7 @@ import { Hero }        from './data-model';
 import { HeroService } from './hero.service';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './demo.component.html'
 })
 export class DemoComponent {
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-1.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-1.component.ts
index 318dfff1459..75b02a36c01 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail-1.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail-1.component.ts
@@ -5,7 +5,7 @@ import { FormControl }            from '@angular/forms';
 // #enddocregion
 
 @Component({
-  selector: 'hero-detail-1',
+  selector: 'app-hero-detail-1',
   templateUrl: './hero-detail-1.component.html'
 })
 // #docregion v1
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-2.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-2.component.ts
index 6aa3c1ed3a3..6508904ffad 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail-2.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail-2.component.ts
@@ -5,7 +5,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 // #enddocregion imports
 
 @Component({
-  selector: 'hero-detail-2',
+  selector: 'app-hero-detail-2',
   templateUrl: './hero-detail-2.component.html'
 })
 // #docregion v2
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-3.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-3.component.ts
index 54a4e933613..81388c8faa6 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail-3.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail-3.component.ts
@@ -5,7 +5,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 // #enddocregion imports
 
 @Component({
-  selector: 'hero-detail-3',
+  selector: 'app-hero-detail-3',
   templateUrl: './hero-detail-3.component.html'
 })
 // #docregion v3
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-3a.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-3a.component.ts
index 23478699673..7cc0b1ca8f6 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail-3a.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail-3a.component.ts
@@ -5,7 +5,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 // #enddocregion imports
 
 @Component({
-  selector: 'hero-detail-3',
+  selector: 'app-hero-detail-3',
   templateUrl: './hero-detail-3.component.html'
 })
 // #docregion v3a
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-4.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-4.component.ts
index d2f1ea2f967..1c3cc8e1ffa 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail-4.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail-4.component.ts
@@ -7,7 +7,7 @@ import { states } from './data-model';
 // #enddocregion imports
 
 @Component({
-  selector: 'hero-detail-4',
+  selector: 'app-hero-detail-4',
   templateUrl: './hero-detail-4.component.html'
 })
 // #docregion v4
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-5.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-5.component.ts
index f4be33389fb..edafd9db795 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail-5.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail-5.component.ts
@@ -5,7 +5,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { states } from './data-model';
 
 @Component({
-  selector: 'hero-detail-5',
+  selector: 'app-hero-detail-5',
   templateUrl: './hero-detail-5.component.html'
 })
 // #docregion v5
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-6.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-6.component.ts
index d5136822d17..903cabb00e0 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail-6.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail-6.component.ts
@@ -11,7 +11,7 @@ import { Hero, states } from './data-model';
 ////////// 6 ////////////////////
 
 @Component({
-  selector: 'hero-detail-6',
+  selector: 'app-hero-detail-6',
   templateUrl: './hero-detail-5.component.html'
 })
 // #docregion v6
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-7.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-7.component.ts
index 497c7f6a56f..fc05703c529 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail-7.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail-7.component.ts
@@ -11,7 +11,7 @@ import { Address, Hero, states } from './data-model';
 // #enddocregion imports
 
 @Component({
-  selector: 'hero-detail-7',
+  selector: 'app-hero-detail-7',
   templateUrl: './hero-detail-5.component.html'
 })
 // #docregion v7
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail-8.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail-8.component.ts
index 1141c836a79..d18386afd2b 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail-8.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail-8.component.ts
@@ -7,7 +7,7 @@ import { Address, Hero, states } from './data-model';
 // #enddocregion imports
 
 @Component({
-  selector: 'hero-detail-8',
+  selector: 'app-hero-detail-8',
   templateUrl: './hero-detail-8.component.html'
 })
 // #docregion v8
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail.component.ts
index 4cb69aaedf9..7afb42da3af 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail.component.ts
@@ -10,7 +10,7 @@ import { HeroService }           from './hero.service';
 
 // #docregion metadata
 @Component({
-  selector: 'hero-detail',
+  selector: 'app-hero-detail',
   templateUrl: './hero-detail.component.html'
 })
 // #enddocregion metadata
diff --git a/aio/content/examples/reactive-forms/src/app/hero-list.component.1.html b/aio/content/examples/reactive-forms/src/app/hero-list.component.1.html
index fa76c84f544..409c9b2a5cc 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-list.component.1.html
+++ b/aio/content/examples/reactive-forms/src/app/hero-list.component.1.html
@@ -4,5 +4,5 @@
 </nav>
 
 <div *ngIf="selectedHero">
-  <hero-detail [hero]="selectedHero"></hero-detail>
+  <app-hero-detail [hero]="selectedHero"></app-hero-detail>
 </div>
diff --git a/aio/content/examples/reactive-forms/src/app/hero-list.component.html b/aio/content/examples/reactive-forms/src/app/hero-list.component.html
index d0fb2ee9205..78356caeb2b 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-list.component.html
+++ b/aio/content/examples/reactive-forms/src/app/hero-list.component.html
@@ -12,6 +12,6 @@
   <h2>Hero Detail</h2>
   <h3>Editing: {{selectedHero.name}}</h3>
   <!-- #docregion hero-binding -->
-  <hero-detail [hero]="selectedHero"></hero-detail>
+  <app-hero-detail [hero]="selectedHero"></app-hero-detail>
   <!-- #enddocregion hero-binding -->
 </div>
diff --git a/aio/content/examples/reactive-forms/src/app/hero-list.component.ts b/aio/content/examples/reactive-forms/src/app/hero-list.component.ts
index 98092adcdb1..08e3b5f13be 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-list.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-list.component.ts
@@ -7,7 +7,7 @@ import { Hero }        from './data-model';
 import { HeroService } from './hero.service';
 
 @Component({
-  selector: 'hero-list',
+  selector: 'app-hero-list',
   templateUrl: './hero-list.component.html'
 })
 export class HeroListComponent implements OnInit {
diff --git a/aio/content/examples/reactive-forms/src/index-final.html b/aio/content/examples/reactive-forms/src/index-final.html
index 9ef0a379e00..0471ac467d5 100644
--- a/aio/content/examples/reactive-forms/src/index-final.html
+++ b/aio/content/examples/reactive-forms/src/index-final.html
@@ -1,18 +1,16 @@
 <!DOCTYPE html>
 <!-- #docregion -->
-<html>
+<html lang="en">
   <head>
     <title>Hero Form</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
     <link rel="stylesheet" href="styles.css">
      <!-- #docregion bootstrap -->
     <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
      <!-- #enddocregion bootstrap -->
 
-    <!-- Polyfills for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
+     <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>
@@ -25,7 +23,7 @@
   </head>
 
   <body>
-    <my-app>Loading...</my-app>
+    <app-root></app-root>
   </body>
 
 </html>
diff --git a/aio/content/examples/reactive-forms/src/index.html b/aio/content/examples/reactive-forms/src/index.html
index 802d12f2113..fcde39cdcee 100644
--- a/aio/content/examples/reactive-forms/src/index.html
+++ b/aio/content/examples/reactive-forms/src/index.html
@@ -1,31 +1,17 @@
 <!DOCTYPE html>
 <!-- #docregion -->
-<html>
+<html lang="en">
   <head>
     <title>Hero Form</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <link rel="stylesheet" href="styles.css">
      <!-- #docregion bootstrap -->
     <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
      <!-- #enddocregion bootstrap -->
-
-    <!-- Polyfills for older browsers -->
-    <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>
-    <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>
diff --git a/aio/content/examples/reactive-forms/src/main-final.ts b/aio/content/examples/reactive-forms/src/main-final.ts
index 7572d1f1d3e..0a1ea31596c 100644
--- a/aio/content/examples/reactive-forms/src/main-final.ts
+++ b/aio/content/examples/reactive-forms/src/main-final.ts
@@ -1,5 +1,13 @@
 // tslint:disable:no-unused-variable
+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);
+
diff --git a/aio/content/examples/reactive-forms/src/main.ts b/aio/content/examples/reactive-forms/src/main.ts
index f415a71708f..bd1865a45b0 100644
--- a/aio/content/examples/reactive-forms/src/main.ts
+++ b/aio/content/examples/reactive-forms/src/main.ts
@@ -1,6 +1,13 @@
 // tslint:disable:no-unused-variable
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }  from './app/app.module';  // just the final version
-import { DemoModule } from './app/demo.module'; // demo picker
 
-platformBrowserDynamic().bootstrapModule(DemoModule); // (AppModule);
+import { AppModule } from './app/app.module'; // just the final version
+import { DemoModule } from './app/demo.module'; // demo picker
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(DemoModule);
diff --git a/aio/content/examples/router/e2e-spec.ts b/aio/content/examples/router/e2e/app.e2e-spec.ts
similarity index 88%
rename from aio/content/examples/router/e2e-spec.ts
rename to aio/content/examples/router/e2e/app.e2e-spec.ts
index 91c2e253d83..f5493caea49 100644
--- a/aio/content/examples/router/e2e-spec.ts
+++ b/aio/content/examples/router/e2e/app.e2e-spec.ts
@@ -12,34 +12,34 @@ describe('Router', () => {
   beforeAll(() => browser.get(''));
 
   function getPageStruct() {
-    const hrefEles = element.all(by.css('my-app > nav a'));
-    const crisisDetail = element.all(by.css('my-app > ng-component > ng-component > ng-component > div')).first();
-    const heroDetail = element(by.css('my-app > ng-component > div'));
+    const hrefEles = element.all(by.css('app-root > nav a'));
+    const crisisDetail = element.all(by.css('app-root > ng-component > ng-component > ng-component > div')).first();
+    const heroDetail = element(by.css('app-root > ng-component > div'));
 
     return {
       hrefs: hrefEles,
-      activeHref: element(by.css('my-app > nav a.active')),
+      activeHref: element(by.css('app-root > nav a.active')),
 
       crisisHref: hrefEles.get(0),
-      crisisList: element.all(by.css('my-app > ng-component > ng-component li')),
+      crisisList: element.all(by.css('app-root > ng-component > ng-component li')),
       crisisDetail: crisisDetail,
       crisisDetailTitle: crisisDetail.element(by.xpath('*[1]')),
 
       heroesHref: hrefEles.get(1),
-      heroesList: element.all(by.css('my-app > ng-component li')),
+      heroesList: element.all(by.css('app-root > ng-component li')),
       heroDetail: heroDetail,
       heroDetailTitle: heroDetail.element(by.xpath('*[1]')),
 
       adminHref: hrefEles.get(2),
-      adminPreloadList: element.all(by.css('my-app > ng-component > ng-component > ul > li')),
+      adminPreloadList: element.all(by.css('app-root > ng-component > ng-component > ul > li')),
 
       loginHref: hrefEles.get(3),
-      loginButton: element.all(by.css('my-app > ng-component > p > button')),
+      loginButton: element.all(by.css('app-root > ng-component > p > button')),
 
       contactHref: hrefEles.get(4),
       contactCancelButton: element.all(by.buttonText('Cancel')),
 
-      outletComponents: element.all(by.css('my-app > ng-component'))
+      outletComponents: element.all(by.css('app-root > ng-component'))
     };
   }
 
diff --git a/aio/content/examples/router/src/app/app.component.1.ts b/aio/content/examples/router/src/app/app.component.1.ts
index 21e9aa417db..c6fe6d2a77d 100644
--- a/aio/content/examples/router/src/app/app.component.1.ts
+++ b/aio/content/examples/router/src/app/app.component.1.ts
@@ -3,7 +3,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   // #docregion template
   template: `
     <h1>Angular Router</h1>
diff --git a/aio/content/examples/router/src/app/app.component.2.ts b/aio/content/examples/router/src/app/app.component.2.ts
index ffd4d8dfae3..e7051839113 100644
--- a/aio/content/examples/router/src/app/app.component.2.ts
+++ b/aio/content/examples/router/src/app/app.component.2.ts
@@ -3,7 +3,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <h1>Angular Router</h1>
     <nav>
diff --git a/aio/content/examples/router/src/app/app.component.3.ts b/aio/content/examples/router/src/app/app.component.3.ts
index 6013df6321d..a8d8e0de0cf 100644
--- a/aio/content/examples/router/src/app/app.component.3.ts
+++ b/aio/content/examples/router/src/app/app.component.3.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 import { Router }    from '@angular/router';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   /* Typical link
   // #docregion h-anchor
   <a [routerLink]="['/heroes']">Heroes</a>
diff --git a/aio/content/examples/router/src/app/app.component.4.ts b/aio/content/examples/router/src/app/app.component.4.ts
index a630703c28f..a51b792a780 100644
--- a/aio/content/examples/router/src/app/app.component.4.ts
+++ b/aio/content/examples/router/src/app/app.component.4.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   // #docregion template
   template: `
     <h1 class="title">Angular Router</h1>
diff --git a/aio/content/examples/router/src/app/app.component.5.ts b/aio/content/examples/router/src/app/app.component.5.ts
index 24162c61361..dc7ebcf58b4 100644
--- a/aio/content/examples/router/src/app/app.component.5.ts
+++ b/aio/content/examples/router/src/app/app.component.5.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   // #docregion template
   template: `
     <h1 class="title">Angular Router</h1>
diff --git a/aio/content/examples/router/src/app/app.component.6.ts b/aio/content/examples/router/src/app/app.component.6.ts
index a479680cbe3..d67ddfb728b 100644
--- a/aio/content/examples/router/src/app/app.component.6.ts
+++ b/aio/content/examples/router/src/app/app.component.6.ts
@@ -3,7 +3,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   // #docregion template
   template: `
     <h1 class="title">Angular Router</h1>
diff --git a/aio/content/examples/router/src/app/app.component.ts b/aio/content/examples/router/src/app/app.component.ts
index 32be0c4d700..70cdf8cba04 100644
--- a/aio/content/examples/router/src/app/app.component.ts
+++ b/aio/content/examples/router/src/app/app.component.ts
@@ -3,7 +3,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   // #docregion template
   template: `
     <h1 class="title">Angular Router</h1>
diff --git a/aio/content/examples/router/src/app.css b/aio/content/examples/router/src/assets/app.css
similarity index 100%
rename from aio/content/examples/router/src/app.css
rename to aio/content/examples/router/src/assets/app.css
diff --git a/aio/content/examples/router/src/index.html b/aio/content/examples/router/src/index.html
index e1bdab0d534..0e5ca721fa9 100644
--- a/aio/content/examples/router/src/index.html
+++ b/aio/content/examples/router/src/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!-- #docregion -->
-<html>
+<html lang="en">
   <head>
     <!-- Set the base href -->
     <!-- #docregion base-href -->
@@ -9,24 +9,11 @@
     <title>Angular Router</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="app.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>
+    <link rel="stylesheet" href="assets/app.css">
   </head>
 
   <body>
-    <my-app>loading...</my-app>
+    <app-root></app-root>
   </body>
 
 </html>
diff --git a/aio/content/examples/security/e2e-spec.ts b/aio/content/examples/security/e2e/app.e2e-spec.ts
similarity index 100%
rename from aio/content/examples/security/e2e-spec.ts
rename to aio/content/examples/security/e2e/app.e2e-spec.ts
diff --git a/aio/content/examples/security/src/app/app.component.ts b/aio/content/examples/security/src/app/app.component.ts
index c30235e8e79..5e6abfba9c2 100644
--- a/aio/content/examples/security/src/app/app.component.ts
+++ b/aio/content/examples/security/src/app/app.component.ts
@@ -2,11 +2,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
   <h1>Security</h1>
-  <inner-html-binding></inner-html-binding>
-  <bypass-security></bypass-security>
+  <app-inner-html-binding></app-inner-html-binding>
+  <app-bypass-security></app-bypass-security>
   `
 })
 export class AppComponent {
diff --git a/aio/content/examples/security/src/app/bypass-security.component.ts b/aio/content/examples/security/src/app/bypass-security.component.ts
index ff41e287bac..7858db96c17 100644
--- a/aio/content/examples/security/src/app/bypass-security.component.ts
+++ b/aio/content/examples/security/src/app/bypass-security.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
 
 @Component({
-  selector: 'bypass-security',
+  selector: 'app-bypass-security',
   templateUrl: './bypass-security.component.html',
 })
 export class BypassSecurityComponent {
diff --git a/aio/content/examples/security/src/app/inner-html-binding.component.ts b/aio/content/examples/security/src/app/inner-html-binding.component.ts
index 83195036861..a4cfaeb04c6 100644
--- a/aio/content/examples/security/src/app/inner-html-binding.component.ts
+++ b/aio/content/examples/security/src/app/inner-html-binding.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'inner-html-binding',
+  selector: 'app-inner-html-binding',
   templateUrl: './inner-html-binding.component.html',
 })
 // #docregion class
diff --git a/aio/content/examples/security/src/index.html b/aio/content/examples/security/src/index.html
index d5dd11c038a..4cf1cd64285 100644
--- a/aio/content/examples/security/src/index.html
+++ b/aio/content/examples/security/src/index.html
@@ -1,26 +1,14 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Angular Content Security</title>
     <base href="/">
     <meta charset="UTF-8">
     <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>
diff --git a/aio/content/examples/security/src/main.ts b/aio/content/examples/security/src/main.ts
index 105b06712d1..0d277197ca9 100644
--- a/aio/content/examples/security/src/main.ts
+++ b/aio/content/examples/security/src/main.ts
@@ -1,6 +1,13 @@
 // #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);
 
diff --git a/aio/content/examples/set-document-title/e2e-spec.ts b/aio/content/examples/set-document-title/e2e/app.e2e-spec.ts
similarity index 100%
rename from aio/content/examples/set-document-title/e2e-spec.ts
rename to aio/content/examples/set-document-title/e2e/app.e2e-spec.ts
diff --git a/aio/content/examples/set-document-title/src/app/app.component.ts b/aio/content/examples/set-document-title/src/app/app.component.ts
index f1905e635d6..14a5c86887d 100644
--- a/aio/content/examples/set-document-title/src/app/app.component.ts
+++ b/aio/content/examples/set-document-title/src/app/app.component.ts
@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
 import { Title }     from '@angular/platform-browser';
 
 @Component({
-selector: 'my-app',
+selector: 'app-root',
 template:
   `<p>
     Select a title to set on the current HTML document:
diff --git a/aio/content/examples/set-document-title/src/index.html b/aio/content/examples/set-document-title/src/index.html
index 6b00948530a..8862e207c30 100644
--- a/aio/content/examples/set-document-title/src/index.html
+++ b/aio/content/examples/set-document-title/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -8,24 +8,6 @@
   <title>
     Setting The Document Title Using The Title Service
   </title>
-
-  <!-- #docregion style -->
-  <link rel="stylesheet" type="text/css" href="styles.css">
-  <link rel="stylesheet" type="text/css" href="sample.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')
-        .then(function()    { console.info( "System.js loaded your application module." )})
-        .catch(function(err){ console.error(err); });
-    </script>
   </head>
 <body>
 
@@ -33,7 +15,7 @@
     Setting The Document Title Using The Title Service
   </h1>
 
-  <my-app>Loading app...</my-app>
+  <app-root></app-root>
 
 </body>
 </html>
diff --git a/aio/content/examples/set-document-title/src/main.ts b/aio/content/examples/set-document-title/src/main.ts
index f332d1d2451..0740658908d 100644
--- a/aio/content/examples/set-document-title/src/main.ts
+++ b/aio/content/examples/set-document-title/src/main.ts
@@ -1,6 +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);
diff --git a/aio/content/examples/structural-directives/e2e-spec.ts b/aio/content/examples/structural-directives/e2e/app.e2e-spec.ts
similarity index 96%
rename from aio/content/examples/structural-directives/e2e-spec.ts
rename to aio/content/examples/structural-directives/e2e/app.e2e-spec.ts
index dbf96a49e14..7cefa4636cf 100644
--- a/aio/content/examples/structural-directives/e2e-spec.ts
+++ b/aio/content/examples/structural-directives/e2e/app.e2e-spec.ts
@@ -19,7 +19,7 @@ describe('Structural Directives', function () {
   });
 
   it('ngSwitch have two <happy-hero> instances', function () {
-    const happyHeroEls = element.all(by.tagName('happy-hero'));
+    const happyHeroEls = element.all(by.tagName('app-happy-hero'));
     expect(happyHeroEls.count()).toEqual(2);
   });
 
diff --git a/aio/content/examples/structural-directives/src/app/app.component.html b/aio/content/examples/structural-directives/src/app/app.component.html
index 00a88e3aa7d..a95240e456a 100644
--- a/aio/content/examples/structural-directives/src/app/app.component.html
+++ b/aio/content/examples/structural-directives/src/app/app.component.html
@@ -150,10 +150,10 @@
 
 <!-- #docregion built-in , ngswitch -->
 <div [ngSwitch]="hero?.emotion">
-  <happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></happy-hero>
-  <sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></sad-hero>
-  <confused-hero *ngSwitchCase="'confused'" [hero]="hero"></confused-hero>
-  <unknown-hero  *ngSwitchDefault           [hero]="hero"></unknown-hero>
+  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero>
+  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero>
+  <app-confused-hero *ngSwitchCase="'app-confused'" [hero]="hero"></app-confused-hero>
+  <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
 </div>
 <!-- #enddocregion built-in, ngswitch -->
 
@@ -161,16 +161,16 @@
 <!-- #docregion ngswitch-template -->
 <div [ngSwitch]="hero?.emotion">
   <ng-template [ngSwitchCase]="'happy'">
-    <happy-hero [hero]="hero"></happy-hero>
+    <app-happy-hero [hero]="hero"></app-happy-hero>
   </ng-template>
   <ng-template [ngSwitchCase]="'sad'">
-    <sad-hero [hero]="hero"></sad-hero>
+    <app-sad-hero [hero]="hero"></app-sad-hero>
   </ng-template>
   <ng-template [ngSwitchCase]="'confused'">
-    <confused-hero [hero]="hero"></confused-hero>
+    <app-confused-hero [hero]="hero"></app-confused-hero>
   </ng-template >
   <ng-template ngSwitchDefault>
-    <unknown-hero [hero]="hero"></unknown-hero>
+    <app-unknown-hero [hero]="hero"></app-unknown-hero>
   </ng-template>
 </div>
 <!-- #enddocregion ngswitch-template -->
@@ -199,11 +199,11 @@
   </button>
 </p>
 <!-- #docregion myUnless-->
-<p *myUnless="condition" class="unless a">
+<p *appUnless="condition" class="unless a">
   (A) This paragraph is displayed because the condition is false.
 </p>
 
-<p *myUnless="!condition" class="unless b">
+<p *appUnless="!condition" class="unless b">
   (B) Although the condition is true,
   this paragraph is displayed because myUnless is set to false.
 </p>
@@ -213,14 +213,14 @@
 <h4>UnlessDirective with template</h4>
 
 <!-- #docregion myUnless-1 -->
-<p *myUnless="condition">Show this sentence unless the condition is true.</p>
+<p *appUnless="condition">Show this sentence unless the condition is true.</p>
 <!-- #enddocregion myUnless-1 -->
 
-<p *myUnless="condition" class="code unless">
+<p *appUnless="condition" class="code unless">
   (A) &lt;p *myUnless="condition" class="code unless"&gt;
 </p>
 
-<ng-template [myUnless]="condition">
+<ng-template [appUnless]="condition">
   <p class="code unless">
     (A) &lt;ng-template [myUnless]="condition"&gt;
   </p>
diff --git a/aio/content/examples/structural-directives/src/app/app.component.ts b/aio/content/examples/structural-directives/src/app/app.component.ts
index ff6f0e65a12..aed11fc77ae 100644
--- a/aio/content/examples/structural-directives/src/app/app.component.ts
+++ b/aio/content/examples/structural-directives/src/app/app.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
 import { Hero, heroes } from './hero';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
 })
diff --git a/aio/content/examples/structural-directives/src/app/hero-switch.components.ts b/aio/content/examples/structural-directives/src/app/hero-switch.components.ts
index bb31563611e..27bf8de8d54 100644
--- a/aio/content/examples/structural-directives/src/app/hero-switch.components.ts
+++ b/aio/content/examples/structural-directives/src/app/hero-switch.components.ts
@@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
-  selector: 'happy-hero',
+  selector: 'app-happy-hero',
   template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
 })
 export class HappyHeroComponent {
@@ -11,7 +11,7 @@ export class HappyHeroComponent {
 }
 
 @Component({
-  selector: 'sad-hero',
+  selector: 'app-sad-hero',
   template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
 })
 export class SadHeroComponent {
@@ -19,7 +19,7 @@ export class SadHeroComponent {
 }
 
 @Component({
-  selector: 'confused-hero',
+  selector: 'app-confused-hero',
   template: `Are you as confused as {{hero.name}}?`
 })
 export class ConfusedHeroComponent {
@@ -27,7 +27,7 @@ export class ConfusedHeroComponent {
 }
 
 @Component({
-  selector: 'unknown-hero',
+  selector: 'app-unknown-hero',
   template: `{{message}}`
 })
 export class UnknownHeroComponent {
diff --git a/aio/content/examples/structural-directives/src/app/unless.directive.ts b/aio/content/examples/structural-directives/src/app/unless.directive.ts
index 8bc3a74cbef..09f98e1707e 100644
--- a/aio/content/examples/structural-directives/src/app/unless.directive.ts
+++ b/aio/content/examples/structural-directives/src/app/unless.directive.ts
@@ -24,7 +24,7 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
 // #docregion no-docs
  */
 // #docregion skeleton
-@Directive({ selector: '[myUnless]'})
+@Directive({ selector: '[appUnless]'})
 export class UnlessDirective {
   // #enddocregion skeleton
   private hasView = false;
@@ -36,7 +36,7 @@ export class UnlessDirective {
   // #enddocregion ctor
 
   // #docregion set
-  @Input() set myUnless(condition: boolean) {
+  @Input() set appUnless(condition: boolean) {
     if (!condition && !this.hasView) {
       this.viewContainer.createEmbeddedView(this.templateRef);
       this.hasView = true;
diff --git a/aio/content/examples/structural-directives/src/index.html b/aio/content/examples/structural-directives/src/index.html
index ce7a33266d0..451b66ce357 100644
--- a/aio/content/examples/structural-directives/src/index.html
+++ b/aio/content/examples/structural-directives/src/index.html
@@ -1,27 +1,15 @@
 <!DOCTYPE html>
 <!-- #docregion -->
-<html>
+<html lang="en">
   <head>
     <title>Angular Structural Directives</title>
     <base href="/">
     <meta charset="UTF-8">
     <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-apps>
+    <app-root></app-root>
   </body>
 
 </html>
diff --git a/aio/content/examples/structural-directives/src/main.ts b/aio/content/examples/structural-directives/src/main.ts
index 105b06712d1..0740658908d 100644
--- a/aio/content/examples/structural-directives/src/main.ts
+++ b/aio/content/examples/structural-directives/src/main.ts
@@ -1,6 +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);
-
diff --git a/aio/content/examples/styleguide/e2e-spec.ts b/aio/content/examples/styleguide/e2e/app.e2e-spec.ts
similarity index 100%
rename from aio/content/examples/styleguide/e2e-spec.ts
rename to aio/content/examples/styleguide/e2e/app.e2e-spec.ts
diff --git a/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css b/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css
index c7903fd25c9..45979c75ade 100644
--- a/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css
+++ b/aio/content/examples/styleguide/src/04-11/app/core/nav/nav.component.css
@@ -28,13 +28,6 @@
     background: rgb(83,109,254);
 }
 
-.md-title-icon > i {
-  background-image: url("assets/ng.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  padding: 1em 2em;
-}
-
 .mdl-layout__header-row {
   height: 56px;
   padding: 0 16px 0 72px;
diff --git a/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css b/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css
index c7903fd25c9..45979c75ade 100644
--- a/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css
+++ b/aio/content/examples/styleguide/src/04-12/app/core/nav/nav.component.css
@@ -28,13 +28,6 @@
     background: rgb(83,109,254);
 }
 
-.md-title-icon > i {
-  background-image: url("assets/ng.png");
-  background-repeat: no-repeat;
-  background-position: center center;
-  padding: 1em 2em;
-}
-
 .mdl-layout__header-row {
   height: 56px;
   padding: 0 16px 0 72px;
diff --git a/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts
index 42bc51f9e9e..22392ab4fdc 100644
--- a/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts
+++ b/aio/content/examples/styleguide/src/07-04/app/heroes/shared/hero-arena.service.ts
@@ -3,7 +3,7 @@
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
 
-import { HeroService } from './index';
+import { HeroService } from './hero.service';
 
 // #docregion example
 @Injectable()
diff --git a/aio/content/examples/styleguide/src/app/app.component.ts b/aio/content/examples/styleguide/src/app/app.component.ts
index 7556beb1ff0..968036cb8c2 100644
--- a/aio/content/examples/styleguide/src/app/app.component.ts
+++ b/aio/content/examples/styleguide/src/app/app.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent { }
diff --git a/aio/content/examples/styleguide/src/app/app.module.ts b/aio/content/examples/styleguide/src/app/app.module.ts
new file mode 100644
index 00000000000..1e974baf5f5
--- /dev/null
+++ b/aio/content/examples/styleguide/src/app/app.module.ts
@@ -0,0 +1,89 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule }            from '@angular/platform-browser';
+
+import { HttpModule }           from '@angular/http';
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+
+import { RouterModule } from '@angular/router';
+
+import { HashLocationStrategy,
+         LocationStrategy } from '@angular/common';
+
+import { HeroData }     from '../app/hero-data';
+import { AppComponent } from '../app/app.component';
+
+import * as s0101 from '../01-01/app/app.module';
+import * as s0205 from '../02-05/app/app.module';
+import * as s0207 from '../02-07/app/app.module';
+import * as s0208 from '../02-08/app/app.module';
+import * as s0301 from '../03-01/app/app.module';
+import * as s0302 from '../03-02/app/app.module';
+import * as s0303 from '../03-03/app/app.module';
+import * as s0304 from '../03-04/app/app.module';
+import * as s0306 from '../03-06/app/app.module';
+import * as s0408 from '../04-08/app/app.module';
+import * as s0410 from '../04-10/app/app.module';
+import * as s0411 from '../04-11/app/app.module';
+import * as s0412 from '../04-12/app/app.module';
+import * as s0502 from '../05-02/app/app.module';
+import * as s0503 from '../05-03/app/app.module';
+import * as s0504 from '../05-04/app/app.module';
+import * as s0512 from '../05-12/app/app.module';
+import * as s0513 from '../05-13/app/app.module';
+import * as s0514 from '../05-14/app/app.module';
+import * as s0515 from '../05-15/app/app.module';
+import * as s0516 from '../05-16/app/app.module';
+import * as s0517 from '../05-17/app/app.module';
+import * as s0601 from '../06-01/app/app.module';
+import * as s0603 from '../06-03/app/app.module';
+import * as s0701 from '../07-01/app/app.module';
+import * as s0703 from '../07-03/app/app.module';
+import * as s0704 from '../07-04/app/app.module';
+import * as s0901 from '../09-01/app/app.module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    HttpModule,
+    InMemoryWebApiModule.forRoot(HeroData),
+
+    s0101.AppModule,
+    s0205.AppModule,
+    s0207.AppModule,
+    s0208.AppModule,
+    s0301.AppModule,
+    s0302.AppModule,
+    s0303.AppModule,
+    s0304.AppModule,
+    s0306.AppModule,
+    s0408.AppModule,
+    s0410.AppModule,
+    s0411.AppModule,
+    s0412.AppModule,
+    s0502.AppModule,
+    s0503.AppModule,
+    s0504.AppModule,
+    s0512.AppModule,
+    s0513.AppModule,
+    s0514.AppModule,
+    s0515.AppModule,
+    s0516.AppModule,
+    s0517.AppModule,
+    s0601.AppModule,
+    s0603.AppModule,
+    s0701.AppModule,
+    s0703.AppModule,
+    s0704.AppModule,
+    s0901.AppModule,
+
+    RouterModule.forRoot([
+      { path: '', redirectTo: '/01-01', pathMatch: 'full' }
+    ], {/* enableTracing: true */}),
+  ],
+  providers: [
+    { provide: LocationStrategy, useClass: HashLocationStrategy }
+  ],
+  declarations: [ AppComponent ],
+  bootstrap:    [ AppComponent ]
+})
+export class AppModule { }
diff --git a/aio/content/examples/styleguide/src/index.html b/aio/content/examples/styleguide/src/index.html
index 188c2c26a1f..ba0335c7e7a 100644
--- a/aio/content/examples/styleguide/src/index.html
+++ b/aio/content/examples/styleguide/src/index.html
@@ -1,29 +1,16 @@
 <!DOCTYPE html>
 <!-- #docregion -->
-<html>
+<html lang="en">
   <head>
     <base href="/">
 
     <title>Style Guide Sample</title>
     <meta charset="UTF-8">
     <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 src="systemjs.custom.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>
diff --git a/aio/content/examples/styleguide/src/main.ts b/aio/content/examples/styleguide/src/main.ts
index 5b4c98ba69c..54fbb1b43f9 100644
--- a/aio/content/examples/styleguide/src/main.ts
+++ b/aio/content/examples/styleguide/src/main.ts
@@ -1,99 +1,6 @@
-import { NgModule } from '@angular/core';
 import { platformBrowserDynamic }   from '@angular/platform-browser-dynamic';
-import { BrowserModule }            from '@angular/platform-browser';
-
-import { HttpModule }           from '@angular/http';
-import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
-
-import { RouterModule } from '@angular/router';
-
-import { HashLocationStrategy,
-         LocationStrategy } from '@angular/common';
+import { AppModule } from './app/app.module';
 
 import 'rxjs/add/operator/map';
 
-import { HeroData }     from './app/hero-data';
-import { AppComponent } from './app/app.component';
-
-import * as s0101 from './01-01/app/app.module';
-import * as s0205 from './02-05/app/app.module';
-import * as s0207 from './02-07/app/app.module';
-import * as s0208 from './02-08/app/app.module';
-import * as s0301 from './03-01/app/app.module';
-import * as s0302 from './03-02/app/app.module';
-import * as s0303 from './03-03/app/app.module';
-import * as s0304 from './03-04/app/app.module';
-import * as s0306 from './03-06/app/app.module';
-import * as s0408 from './04-08/app/app.module';
-import * as s0410 from './04-10/app/app.module';
-import * as s0411 from './04-11/app/app.module';
-import * as s0412 from './04-12/app/app.module';
-import * as s0502 from './05-02/app/app.module';
-import * as s0503 from './05-03/app/app.module';
-import * as s0504 from './05-04/app/app.module';
-import * as s0512 from './05-12/app/app.module';
-import * as s0513 from './05-13/app/app.module';
-import * as s0514 from './05-14/app/app.module';
-import * as s0515 from './05-15/app/app.module';
-import * as s0516 from './05-16/app/app.module';
-import * as s0517 from './05-17/app/app.module';
-import * as s0601 from './06-01/app/app.module';
-import * as s0603 from './06-03/app/app.module';
-import * as s0701 from './07-01/app/app.module';
-import * as s0703 from './07-03/app/app.module';
-import * as s0704 from './07-04/app/app.module';
-import * as s0901 from './09-01/app/app.module';
-
-///////////////////
-const moduleMetadata = {
-  imports: [
-    BrowserModule,
-    HttpModule,
-    InMemoryWebApiModule.forRoot(HeroData),
-
-    s0101.AppModule,
-    s0205.AppModule,
-    s0207.AppModule,
-    s0208.AppModule,
-    s0301.AppModule,
-    s0302.AppModule,
-    s0303.AppModule,
-    s0304.AppModule,
-    s0306.AppModule,
-    s0408.AppModule,
-    s0410.AppModule,
-    s0411.AppModule,
-    s0412.AppModule,
-    s0502.AppModule,
-    s0503.AppModule,
-    s0504.AppModule,
-    s0512.AppModule,
-    s0513.AppModule,
-    s0514.AppModule,
-    s0515.AppModule,
-    s0516.AppModule,
-    s0517.AppModule,
-    s0601.AppModule,
-    s0603.AppModule,
-    s0701.AppModule,
-    s0703.AppModule,
-    s0704.AppModule,
-    s0901.AppModule,
-
-    RouterModule.forRoot([
-      { path: '', redirectTo: '/01-01', pathMatch: 'full' }
-    ], {/* enableTracing: true */}),
-  ],
-  providers: [
-    { provide: LocationStrategy, useClass: HashLocationStrategy }
-  ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
-};
-
-@NgModule(moduleMetadata)
-class MainModule { }
-
-platformBrowserDynamic().bootstrapModule(MainModule);
-
-
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/styleguide/src/systemjs.custom.js b/aio/content/examples/styleguide/src/systemjs.custom.js
deleted file mode 100644
index 3424b2b62d6..00000000000
--- a/aio/content/examples/styleguide/src/systemjs.custom.js
+++ /dev/null
@@ -1,51 +0,0 @@
-(function(global) {
-  // extra local packages
-  var packageNames = [
-    '01-01', '01-01/app', '01-01/app/heroes', '01-01/app/heroes/shared',
-    '02-05', '02-05/app',
-    '02-07', '02-07/app', '02-07/app/heroes', '02-07/app/users',
-    '02-08', '02-08/app', '02-08/app/shared',
-    '03-01', '03-01/app', '03-01/app/core',
-    '03-02', '03-02/app', '03-02/app/core',
-    '03-03', '03-03/app', '03-03/app/core',
-    '03-04', '03-04/app', '03-04/app/core',
-    '03-05', '03-05/app', '03-05/app/core', '03-05/app/core/spinner', '03-05/app/core/toast',
-      '03-05/app/heroes', '03-05/app/heroes/shared',
-    '03-06', '03-06/app', '03-06/app/core', '03-06/app/core/spinner', '03-06/app/core/toast',
-      '03-06/app/heroes', '03-06/app/heroes/shared',
-    '04-08', '04-08/app', '04-08/app/heroes',
-    '04-10', '04-10/app', '04-10/app/shared', '04-10/app/heroes', '04-10/app/shared/spinner', '04-10/app/shared/toast',
-      '04-10/app/shared/filter-text',
-    '04-11', '04-11/app', '04-11/app/core', '04-11/app/heroes', '04-11/app/core/spinner',
-      '04-11/app/core/nav',
-    '04-12', '04-12/app', '04-12/app/core', '04-12/app/heroes', '04-12/app/core/nav',
-    '05-02', '05-02/app', '05-02/app/heroes', '05-02/app/heroes/shared', '05-02/app/heroes/shared/hero-button',
-    '05-03', '05-03/app', '05-03/app/heroes', '05-03/app/heroes/shared', '05-03/app/heroes/shared/hero-button',
-    '05-04', '05-04/app', '05-04/app/heroes', '05-04/app/heroes/shared',
-    '05-12', '05-12/app', '05-12/app/heroes', '05-12/app/heroes/shared', '05-12/app/heroes/shared/hero-button',
-    '05-13', '05-13/app', '05-13/app/heroes', '05-13/app/heroes/shared', '05-13/app/heroes/shared/hero-button',
-    '05-14', '05-14/app', '05-14/app/shared', '05-14/app/shared/toast',
-    '05-15', '05-15/app', '05-15/app/heroes', '05-15/app/heroes/hero-list', '05-15/app/heroes/shared',
-    '05-16', '05-16/app', '05-16/app/heroes',
-    '05-17', '05-17/app', '05-17/app/heroes', '05-17/app/heroes/hero', '05-17/app/heroes/hero-list',
-    '05-17/app/heroes/shared',
-    '06-01', '06-01/app', '06-01/app/shared',
-    '06-03', '06-03/app', '06-03/app/shared',
-    '07-01', '07-01/app', '07-01/app/heroes', '07-01/app/heroes/shared',
-    '07-03', '07-03/app', '07-03/app/heroes', '07-03/app/heroes/hero-list', '07-03/app/heroes/shared',
-    '07-04', '07-04/app', '07-04/app/heroes', '07-04/app/heroes/shared',
-    '09-01', '09-01/app', '09-01/app/heroes', '09-01/app/heroes/shared', '09-01/app/heroes/shared/hero-button'
-  ];
-
-  var packages = {};
-  packageNames.forEach(function(pkgName) {
-    packages[pkgName] = { main: 'index.js', defaultExtension: 'js', meta: { './*.js': { loader: 'systemjs-angular-loader.js' }} };
-  });
-
-  var config = {
-    packages: packages
-  }
-
-  System.config(config);
-
-})(this);
diff --git a/aio/content/examples/template-syntax/e2e-spec.ts b/aio/content/examples/template-syntax/e2e/app.e2e-spec.ts
similarity index 100%
rename from aio/content/examples/template-syntax/e2e-spec.ts
rename to aio/content/examples/template-syntax/e2e/app.e2e-spec.ts
diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html
index 1d8297a3b67..8627c73bcb0 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.html
+++ b/aio/content/examples/template-syntax/src/app/app.component.html
@@ -134,7 +134,7 @@
 <!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
 <!-- #docregion img+button -->
 <div class="special">Mental Model</div>
-<img src="images/hero.png">
+<img src="assets/images/hero.png">
 <button disabled>Save</button>
 <!-- #enddocregion img+button -->
 <br><br>
@@ -144,7 +144,7 @@
   <!-- Normal HTML -->
   <div class="special">Mental Model</div>
   <!-- Wow! A new element! -->
-  <hero-detail></hero-detail>
+  <app-hero-detail></app-hero-detail>
   <!-- #enddocregion hero-detail-1 -->
 </div>
 <br><br>
@@ -160,7 +160,7 @@
 <div>
   <!-- #docregion property-binding-syntax-1 -->
   <img [src]="heroImageUrl">
-  <hero-detail [hero]="currentHero"></hero-detail>
+  <app-hero-detail [hero]="currentHero"></app-hero-detail>
   <div [ngClass]="{'special': isSpecial}"></div>
   <!-- #enddocregion property-binding-syntax-1 -->
 </div>
@@ -168,7 +168,7 @@
 
 <!-- #docregion event-binding-syntax-1 -->
 <button (click)="onSave()">Save</button>
-<hero-detail (deleteRequest)="deleteHero()"></hero-detail>
+<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
 <div (myClick)="clicked=$event" clickable>click me</div>
 <!-- #enddocregion event-binding-syntax-1 -->
 {{clicked}}
@@ -242,7 +242,7 @@ button</button>
 <div [ngClass]="classes">[ngClass] binding to the classes property</div>
 <!-- #enddocregion property-binding-3 -->
 <!-- #docregion property-binding-4 -->
-<hero-detail [hero]="currentHero"></hero-detail>
+<app-hero-detail [hero]="currentHero"></app-hero-detail>
 <!-- #enddocregion property-binding-4 -->
 <!-- #docregion property-binding-5 -->
 <img bind-src="heroImageUrl">
@@ -254,11 +254,11 @@ button</button>
 <!-- #enddocregion property-binding-6 -->
 <div *ngIf="false">
 <!-- #docregion property-binding-6 -->
-  <hero-detail hero="currentHero"></hero-detail>
+  <app-hero-detail hero="currentHero"></app-hero-detail>
 <!-- #enddocregion property-binding-6 -->
 </div>
 <!-- #docregion property-binding-7 -->
-<hero-detail prefix="You are my" [hero]="currentHero"></hero-detail>
+<app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
 <!-- #enddocregion property-binding-7 -->
 
 <!-- #docregion property-binding-vs-interpolation -->
@@ -385,14 +385,14 @@ button</button>
 
 <!-- binding to a nested component -->
 <!-- #docregion event-binding-to-component -->
-<hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></hero-detail>
+<app-hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></app-hero-detail>
 <!-- #enddocregion event-binding-to-component -->
 <br>
 
-<big-hero-detail
+<app-big-hero-detail
     (deleteRequest)="deleteHero($event)"
     [hero]="currentHero">
-</big-hero-detail>
+</app-big-hero-detail>
 
 <!-- #docregion event-binding-bubbling -->
 <div class="parent-div" (click)="onClickMe($event)" clickable>Click me
@@ -419,7 +419,7 @@ button</button>
 <hr><h2 id="two-way">Two-way Binding</h2>
 <div id="two-way-1">
   <!-- #docregion two-way-1 -->
-  <my-sizer [(size)]="fontSizePx"></my-sizer>
+  <app-sizer [(size)]="fontSizePx"></app-sizer>
   <div [style.font-size.px]="fontSizePx">Resizable Text</div>
   <!-- #enddocregion two-way-1 -->
   <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
@@ -428,7 +428,7 @@ button</button>
 <div id="two-way-2">
   <h3>De-sugared two-way binding</h3>
   <!-- #docregion two-way-2 -->
-  <my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>
+  <app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
   <!-- #enddocregion two-way-2 -->
 </div>
 
@@ -535,7 +535,7 @@ bindon-ngModel
 <hr><h2 id="ngIf">NgIf Binding</h2>
 
 <!-- #docregion NgIf-1 -->
-<hero-detail *ngIf="isActive"></hero-detail>
+<app-hero-detail *ngIf="isActive"></app-hero-detail>
 <!-- #enddocregion NgIf-1 -->
 
 <!-- #docregion NgIf-2 -->
@@ -550,7 +550,7 @@ bindon-ngModel
 <!-- Does not show because isActive is false! -->
 <div>Hero Detail removed from DOM (via template) because isActive is false</div>
 <ng-template [ngIf]="isActive">
-  <hero-detail></hero-detail>
+  <app-hero-detail></app-hero-detail>
 </ng-template>
 
 <!-- #docregion NgIf-3 -->
@@ -559,7 +559,7 @@ bindon-ngModel
 <div [class.hidden]="isSpecial">Hide with class</div>
 
 <!-- HeroDetail is in the DOM but hidden -->
-<hero-detail [class.hidden]="isSpecial"></hero-detail>
+<app-hero-detail [class.hidden]="isSpecial"></app-hero-detail>
 
 <div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
 <div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>
@@ -580,7 +580,7 @@ bindon-ngModel
 <div class="box">
   <!-- *ngFor w/ hero-detail Component -->
   <!-- #docregion NgFor-2, NgFor-1-2 -->
-  <hero-detail *ngFor="let hero of heroes" [hero]="hero"></hero-detail>
+  <app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>
   <!-- #enddocregion NgFor-2, NgFor-1-2 -->
 </div>
 
@@ -665,15 +665,15 @@ bindon-ngModel
 
 <!-- #docregion NgSwitch -->
 <div [ngSwitch]="currentHero.emotion">
-  <happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></happy-hero>
-  <sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></sad-hero>
-  <confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></confused-hero>
+  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
+  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
+  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
 <!-- #enddocregion NgSwitch -->
   <!-- #docregion NgSwitch-div -->
   <div *ngSwitchCase="'confused'">Are you as confused as {{currentHero.name}}?</div>
   <!-- #enddocregion NgSwitch-div -->
 <!-- #docregion NgSwitch -->
-  <unknown-hero  *ngSwitchDefault           [hero]="currentHero"></unknown-hero>
+  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
 </div>
 <!-- #enddocregion NgSwitch -->
 
@@ -702,7 +702,7 @@ bindon-ngModel
 <button #btn disabled [innerHTML]="'disabled by attribute: '+btn.disabled"></button>
 
 <h4>Example Form</h4>
-<hero-form [hero]="currentHero"></hero-form>
+<app-hero-form [hero]="currentHero"></app-hero-form>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -715,8 +715,8 @@ bindon-ngModel
 <!-- #enddocregion io-1 -->
 
 <!-- #docregion io-2 -->
-<hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
-</hero-detail>
+<app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
+</app-hero-detail>
 <!-- #enddocregion io-2 -->
 
 <div (myClick)="clickMessage2=$event" clickable>myClick2</div>
diff --git a/aio/content/examples/template-syntax/src/app/app.component.ts b/aio/content/examples/template-syntax/src/app/app.component.ts
index 2e474dd04a7..b1d4e484df3 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.ts
+++ b/aio/content/examples/template-syntax/src/app/app.component.ts
@@ -11,7 +11,7 @@ export enum Color {Red, Green, Blue};
  * Giant grab bag of stuff to drive the chapter
  */
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
 })
@@ -93,12 +93,12 @@ export class AppComponent implements AfterViewInit, OnInit {
 
   // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
   // Public Domain terms of use: http://www.wpclipart.com/terms.html
-  heroImageUrl = 'images/hero.png';
+  heroImageUrl = 'assets/images/hero.png';
   // villainImageUrl = 'http://www.clker.com/cliparts/u/s/y/L/x/9/villain-man-hi.png'
   // Public Domain terms of use http://www.clker.com/disclaimer.html
-  villainImageUrl = 'images/villain.png';
+  villainImageUrl = 'assets/images/villain.png';
 
-  iconUrl = 'images/ng-logo.png';
+  iconUrl = 'assets/images/ng-logo.png';
   isActive = false;
   isSpecial = true;
   isUnchanged = true;
diff --git a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
index 06272572a65..14cdeed0afc 100644
--- a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
+++ b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
@@ -7,7 +7,7 @@ import { Hero } from './hero';
 // #docregion input-output-2
 @Component({
 // #enddocregion input-output-2
-  selector: 'hero-detail',
+  selector: 'app-hero-detail',
   // #docregion input-output-2
   inputs: ['hero'],
   outputs: ['deleteRequest'],
@@ -30,7 +30,7 @@ export class HeroDetailComponent {
   hero: Hero = new Hero(-1, '', 'Zzzzzzzz'); // default sleeping hero
   // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png';
   // Public Domain terms of use: http://www.wpclipart.com/terms.html
-  heroImageUrl = 'images/hero.png';
+  heroImageUrl = 'assets/images/hero.png';
   lineThrough = '';
   @Input() prefix = '';
 
@@ -48,7 +48,7 @@ export class HeroDetailComponent {
 }
 
 @Component({
-  selector: 'big-hero-detail',
+  selector: 'app-big-hero-detail',
   template: `
   <div class="detail">
     <img src="{{heroImageUrl}}">
diff --git a/aio/content/examples/template-syntax/src/app/hero-form.component.ts b/aio/content/examples/template-syntax/src/app/hero-form.component.ts
index 8191117d1d4..63040131ff2 100644
--- a/aio/content/examples/template-syntax/src/app/hero-form.component.ts
+++ b/aio/content/examples/template-syntax/src/app/hero-form.component.ts
@@ -4,7 +4,7 @@ import { NgForm }                      from '@angular/forms';
 import { Hero } from './hero';
 
 @Component({
-  selector: 'hero-form',
+  selector: 'app-hero-form',
   templateUrl: './hero-form.component.html',
   styles: [`
     button { margin: 6px 0; }
diff --git a/aio/content/examples/template-syntax/src/app/hero-switch.components.ts b/aio/content/examples/template-syntax/src/app/hero-switch.components.ts
index 2dad8a0ba0a..d2a2dcc7cc4 100644
--- a/aio/content/examples/template-syntax/src/app/hero-switch.components.ts
+++ b/aio/content/examples/template-syntax/src/app/hero-switch.components.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
-  selector: 'happy-hero',
+  selector: 'app-happy-hero',
   template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
 })
 export class HappyHeroComponent {
@@ -10,7 +10,7 @@ export class HappyHeroComponent {
 }
 
 @Component({
-  selector: 'sad-hero',
+  selector: 'app-sad-hero',
   template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
 })
 export class SadHeroComponent {
@@ -18,7 +18,7 @@ export class SadHeroComponent {
 }
 
 @Component({
-  selector: 'confused-hero',
+  selector: 'app-confused-hero',
   template: `Are you as confused as {{hero.name}}?`
 })
 export class ConfusedHeroComponent {
@@ -26,7 +26,7 @@ export class ConfusedHeroComponent {
 }
 
 @Component({
-  selector: 'unknown-hero',
+  selector: 'app-unknown-hero',
   template: `{{message}}`
 })
 export class UnknownHeroComponent {
diff --git a/aio/content/examples/template-syntax/src/app/sizer.component.ts b/aio/content/examples/template-syntax/src/app/sizer.component.ts
index b6065c8cd14..3cb45a77da3 100644
--- a/aio/content/examples/template-syntax/src/app/sizer.component.ts
+++ b/aio/content/examples/template-syntax/src/app/sizer.component.ts
@@ -2,7 +2,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
-  selector: 'my-sizer',
+  selector: 'app-sizer',
   template: `
   <div>
     <button (click)="dec()" title="smaller">-</button>
diff --git a/aio/content/examples/template-syntax/src/images/hero.png b/aio/content/examples/template-syntax/src/assets/images/hero.png
similarity index 100%
rename from aio/content/examples/template-syntax/src/images/hero.png
rename to aio/content/examples/template-syntax/src/assets/images/hero.png
diff --git a/aio/content/examples/template-syntax/src/images/ng-logo.png b/aio/content/examples/template-syntax/src/assets/images/ng-logo.png
similarity index 100%
rename from aio/content/examples/template-syntax/src/images/ng-logo.png
rename to aio/content/examples/template-syntax/src/assets/images/ng-logo.png
diff --git a/aio/content/examples/template-syntax/src/images/villain.png b/aio/content/examples/template-syntax/src/assets/images/villain.png
similarity index 100%
rename from aio/content/examples/template-syntax/src/images/villain.png
rename to aio/content/examples/template-syntax/src/assets/images/villain.png
diff --git a/aio/content/examples/template-syntax/src/index.html b/aio/content/examples/template-syntax/src/index.html
index 3e711397cbf..866fc067cb4 100644
--- a/aio/content/examples/template-syntax/src/index.html
+++ b/aio/content/examples/template-syntax/src/index.html
@@ -1,26 +1,14 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Template Syntax</title>
     <base href="/">
     <meta charset="UTF-8">
     <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>
diff --git a/aio/content/examples/template-syntax/src/main.ts b/aio/content/examples/template-syntax/src/main.ts
index 311c44b76de..a9ca1caf8ce 100644
--- a/aio/content/examples/template-syntax/src/main.ts
+++ b/aio/content/examples/template-syntax/src/main.ts
@@ -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);
diff --git a/aio/content/examples/testing/src/app/app.component.ts b/aio/content/examples/testing/src/app/app.component.ts
index 5bd535a1135..7b3cf496f14 100644
--- a/aio/content/examples/testing/src/app/app.component.ts
+++ b/aio/content/examples/testing/src/app/app.component.ts
@@ -1,7 +1,7 @@
 // #docregion
 import { Component } from '@angular/core';
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent { }
diff --git a/aio/content/examples/testing/src/app/app.module.ts b/aio/content/examples/testing/src/app/app.module.ts
index d3c288ad113..7ec766e3231 100644
--- a/aio/content/examples/testing/src/app/app.module.ts
+++ b/aio/content/examples/testing/src/app/app.module.ts
@@ -6,8 +6,8 @@ import { AppRoutingModule } from './app-routing.module';
 
 import { AboutComponent }   from './about.component';
 import { BannerComponent }  from './banner.component';
-import { HeroService,
-         UserService }      from './model';
+import { UserService }      from './model/user.service';
+import { HeroService } from './model/hero.service';
 import { TwainService }     from './shared/twain.service';
 import { WelcomeComponent } from './welcome.component';
 
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
index 9f6be16d7d3..3b6de56cf4b 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
@@ -1,7 +1,7 @@
 // #docregion
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
-import { Hero } from '../model';
+import { Hero } from '../model/hero';
 
 // #docregion component
 @Component({
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
index 3edaa0c0ab2..6521f4b52e5 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.ts
@@ -2,7 +2,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Router }            from '@angular/router';
 
-import { Hero, HeroService } from '../model';
+import { Hero } from '../model/hero';
+import { HeroService } from '../model/hero.service';
 
 @Component({
   selector: 'app-dashboard',
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
index d989badbf37..b595a513711 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.ts
@@ -4,7 +4,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { ActivatedRoute, Router }   from '@angular/router';
 import 'rxjs/add/operator/map';
 
-import { Hero }              from '../model';
+import { Hero }              from '../model/hero';
 import { HeroDetailService } from './hero-detail.service';
 
 // #docregion prototype
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.service.ts b/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
index 6239ae5b806..f7dc8878271 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 
-import { Hero, HeroService } from '../model';
+import { Hero } from '../model/hero';
+import { HeroService } from '../model/hero.service';
 
 // #docregion prototype
 @Injectable()
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.ts
index c61ff23f0e6..614976319b7 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Router }            from '@angular/router';
 
-import { Hero, HeroService } from '../model';
+import { Hero } from '../model/hero';
+import { HeroService } from '../model/hero.service';
 
 @Component({
   selector: 'app-heroes',
diff --git a/aio/content/examples/testing/src/app/model/index.ts b/aio/content/examples/testing/src/app/model/index.ts
deleted file mode 100644
index 227004d5bed..00000000000
--- a/aio/content/examples/testing/src/app/model/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// Model barrel
-export * from './hero';
-export * from './hero.service';
-export * from './http-hero.service';
-export * from './test-heroes';
-
-export * from './user.service';
diff --git a/aio/content/examples/testing/src/app/model/testing/index.ts b/aio/content/examples/testing/src/app/model/testing/index.ts
deleted file mode 100644
index 6da76e67db9..00000000000
--- a/aio/content/examples/testing/src/app/model/testing/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './fake-hero.service';
diff --git a/aio/content/examples/testing/src/app/welcome.component.ts b/aio/content/examples/testing/src/app/welcome.component.ts
index 35958cc5c99..9bc5ca33c49 100644
--- a/aio/content/examples/testing/src/app/welcome.component.ts
+++ b/aio/content/examples/testing/src/app/welcome.component.ts
@@ -1,6 +1,7 @@
 // #docregion
 import { Component, OnInit } from '@angular/core';
-import { UserService }       from './model';
+
+import { UserService }       from './model/user.service';
 
 @Component({
   selector: 'app-welcome',
diff --git a/aio/content/examples/testing/src/index.html b/aio/content/examples/testing/src/index.html
index fff2464efc8..adc021fd82d 100644
--- a/aio/content/examples/testing/src/index.html
+++ b/aio/content/examples/testing/src/index.html
@@ -1,27 +1,14 @@
 <!-- Run the test app-->
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <base href="/">
     <title>App Under Test</title>
     <meta charset="UTF-8">
     <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 src="systemjs.config.extras.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>
diff --git a/aio/content/examples/testing/src/main.ts b/aio/content/examples/testing/src/main.ts
index fadce2f3c1a..27d21e9dac6 100644
--- a/aio/content/examples/testing/src/main.ts
+++ b/aio/content/examples/testing/src/main.ts
@@ -1,5 +1,12 @@
 // main app entry point
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }              from './app/app.module';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
 
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/aio/content/examples/testing/src/systemjs.config.extras.js b/aio/content/examples/testing/src/systemjs.config.extras.js
deleted file mode 100644
index 218e65715cb..00000000000
--- a/aio/content/examples/testing/src/systemjs.config.extras.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-/** App specific SystemJS configuration */
-System.config({
-  packages: {
-    // barrels
-    'app/model': {main:'index.js', defaultExtension:'js'},
-    'app/model/testing': {main:'index.js', defaultExtension:'js'}
-  }
-});
diff --git a/aio/content/examples/testing/src/testing/jasmine-matchers.d.ts b/aio/content/examples/testing/src/testing/jasmine-matchers.d.ts
index f1c5acf77c3..cafce642f9a 100644
--- a/aio/content/examples/testing/src/testing/jasmine-matchers.d.ts
+++ b/aio/content/examples/testing/src/testing/jasmine-matchers.d.ts
@@ -1,5 +1,5 @@
 declare namespace jasmine {
-  interface Matchers {
+  interface Matchers<T> {
     toHaveText(actual: any, expectationFailOutput?: any): jasmine.CustomMatcher;
   }
 }
diff --git a/aio/content/examples/toh-pt1/src/index.html b/aio/content/examples/toh-pt1/src/index.html
index a217238c6cb..bf9dae3ab7a 100644
--- a/aio/content/examples/toh-pt1/src/index.html
+++ b/aio/content/examples/toh-pt1/src/index.html
@@ -1,22 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Angular Tour of Heroes</title>
     <base href="/">
     <meta charset="UTF-8">
     <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>
diff --git a/aio/content/examples/toh-pt1/src/main.ts b/aio/content/examples/toh-pt1/src/main.ts
index 80ece654a57..6fd45e7d1e7 100644
--- a/aio/content/examples/toh-pt1/src/main.ts
+++ b/aio/content/examples/toh-pt1/src/main.ts
@@ -1,6 +1,13 @@
 // #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);
 // #enddocregion
diff --git a/aio/content/examples/toh-pt2/src/index.html b/aio/content/examples/toh-pt2/src/index.html
index a217238c6cb..bf9dae3ab7a 100644
--- a/aio/content/examples/toh-pt2/src/index.html
+++ b/aio/content/examples/toh-pt2/src/index.html
@@ -1,22 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Angular Tour of Heroes</title>
     <base href="/">
     <meta charset="UTF-8">
     <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>
diff --git a/aio/content/examples/toh-pt2/src/main.ts b/aio/content/examples/toh-pt2/src/main.ts
index 80ece654a57..6fd45e7d1e7 100644
--- a/aio/content/examples/toh-pt2/src/main.ts
+++ b/aio/content/examples/toh-pt2/src/main.ts
@@ -1,6 +1,13 @@
 // #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);
 // #enddocregion
diff --git a/aio/content/examples/toh-pt3/src/index.html b/aio/content/examples/toh-pt3/src/index.html
index a217238c6cb..bf9dae3ab7a 100644
--- a/aio/content/examples/toh-pt3/src/index.html
+++ b/aio/content/examples/toh-pt3/src/index.html
@@ -1,22 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Angular Tour of Heroes</title>
     <base href="/">
     <meta charset="UTF-8">
     <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>
diff --git a/aio/content/examples/toh-pt3/src/main.ts b/aio/content/examples/toh-pt3/src/main.ts
index aa939b3241d..fd8f859f5ca 100644
--- a/aio/content/examples/toh-pt3/src/main.ts
+++ b/aio/content/examples/toh-pt3/src/main.ts
@@ -1,6 +1,13 @@
 // #docregion pt1
+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);
 // #enddocregion pt1
diff --git a/aio/content/examples/toh-pt4/src/index.html b/aio/content/examples/toh-pt4/src/index.html
index a217238c6cb..bf9dae3ab7a 100644
--- a/aio/content/examples/toh-pt4/src/index.html
+++ b/aio/content/examples/toh-pt4/src/index.html
@@ -1,22 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>Angular Tour of Heroes</title>
     <base href="/">
     <meta charset="UTF-8">
     <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>
diff --git a/aio/content/examples/toh-pt4/src/main.1.ts b/aio/content/examples/toh-pt4/src/main.1.ts
index f22933ba8ed..a9ca1caf8ce 100644
--- a/aio/content/examples/toh-pt4/src/main.1.ts
+++ b/aio/content/examples/toh-pt4/src/main.1.ts
@@ -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);
diff --git a/aio/content/examples/toh-pt4/src/main.ts b/aio/content/examples/toh-pt4/src/main.ts
index f22933ba8ed..a9ca1caf8ce 100644
--- a/aio/content/examples/toh-pt4/src/main.ts
+++ b/aio/content/examples/toh-pt4/src/main.ts
@@ -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);
diff --git a/aio/content/examples/toh-pt5/src/index.html b/aio/content/examples/toh-pt5/src/index.html
index cbacc9b83bf..ad300fc2445 100644
--- a/aio/content/examples/toh-pt5/src/index.html
+++ b/aio/content/examples/toh-pt5/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <!-- #docregion head -->
   <!-- #docregion base-href -->
   <head>
@@ -8,22 +8,6 @@
     <title>Angular Tour of Heroes</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- #enddocregion head -->
-    <!-- #docregion css -->
-    <link rel="stylesheet" href="styles.css">
-    <!-- #enddocregion css -->
-    <!-- #docregion head -->
-    <!-- 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>
   <!-- #enddocregion head -->
 
diff --git a/aio/content/examples/toh-pt5/src/main.ts b/aio/content/examples/toh-pt5/src/main.ts
index 505f60b35bf..d89536473ac 100644
--- a/aio/content/examples/toh-pt5/src/main.ts
+++ b/aio/content/examples/toh-pt5/src/main.ts
@@ -1,6 +1,13 @@
 // #docregion
 // main entry point
+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);
diff --git a/aio/content/examples/toh-pt6/src/index.html b/aio/content/examples/toh-pt6/src/index.html
index 18977969bb2..8d270fad4df 100644
--- a/aio/content/examples/toh-pt6/src/index.html
+++ b/aio/content/examples/toh-pt6/src/index.html
@@ -1,23 +1,10 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <base href="/">
     <title>Angular Tour of Heroes</title>
     <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>
diff --git a/aio/content/examples/toh-pt6/src/main.ts b/aio/content/examples/toh-pt6/src/main.ts
index f332d1d2451..0740658908d 100644
--- a/aio/content/examples/toh-pt6/src/main.ts
+++ b/aio/content/examples/toh-pt6/src/main.ts
@@ -1,6 +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);
diff --git a/aio/content/examples/universal/tsconfig.json b/aio/content/examples/universal/tsconfig.json
index 58307adfe0f..a6c016bf38a 100644
--- a/aio/content/examples/universal/tsconfig.json
+++ b/aio/content/examples/universal/tsconfig.json
@@ -1,20 +1,19 @@
 {
+  "compileOnSave": false,
   "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "moduleResolution": "node",
+    "outDir": "./dist/out-tsc",
     "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": [ "es2015", "dom" ],
-    "noImplicitAny": true,
-    "suppressImplicitAnyIndexErrors": true,
+    "target": "es5",
     "typeRoots": [
-      "../../../node_modules/@types/"
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
     ]
-  },
-  "compileOnSave": true,
-  "exclude": [
-    "node_modules/*"
-  ]
+  }
 }
diff --git a/aio/content/examples/upgrade-module/example-config.json b/aio/content/examples/upgrade-module/example-config.json
index e69de29bb2d..61227cc07aa 100644
--- a/aio/content/examples/upgrade-module/example-config.json
+++ b/aio/content/examples/upgrade-module/example-config.json
@@ -0,0 +1,3 @@
+{
+  "projectType": "systemjs"
+}
diff --git a/aio/content/examples/upgrade-module/src/index-a-to-ajs-providers.html b/aio/content/examples/upgrade-module/src/index-a-to-ajs-providers.html
index 693655a53c6..33a897868be 100644
--- a/aio/content/examples/upgrade-module/src/index-a-to-ajs-providers.html
+++ b/aio/content/examples/upgrade-module/src/index-a-to-ajs-providers.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
   <head>
     <title>Angular Upgrade</title>
     <base href="/">
diff --git a/aio/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html b/aio/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html
index 43bc09c64be..767ce3312bf 100644
--- a/aio/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html
+++ b/aio/content/examples/upgrade-module/src/index-a-to-ajs-transclusion.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
   <head>
     <title>Angular Upgrade</title>
     <base href="/">
diff --git a/aio/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html b/aio/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html
index 1115e931f53..7bcc58d0ee3 100644
--- a/aio/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html
+++ b/aio/content/examples/upgrade-module/src/index-ajs-a-hybrid-bootstrap.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
   <head>
     <title>Angular Upgrade</title>
     <base href="/">
diff --git a/aio/content/examples/upgrade-module/src/index-ajs-to-a-projection.html b/aio/content/examples/upgrade-module/src/index-ajs-to-a-projection.html
index 34569570778..a49e5070df1 100644
--- a/aio/content/examples/upgrade-module/src/index-ajs-to-a-projection.html
+++ b/aio/content/examples/upgrade-module/src/index-ajs-to-a-projection.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
   <head>
     <title>Angular Upgrade</title>
     <base href="/">
diff --git a/aio/content/examples/upgrade-module/src/index-ajs-to-a-providers.html b/aio/content/examples/upgrade-module/src/index-ajs-to-a-providers.html
index 7d1f2b7a05b..a0cc20d068c 100644
--- a/aio/content/examples/upgrade-module/src/index-ajs-to-a-providers.html
+++ b/aio/content/examples/upgrade-module/src/index-ajs-to-a-providers.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
   <head>
     <title>Angular Upgrade</title>
     <base href="/">
diff --git a/aio/content/examples/upgrade-module/src/index-bootstrap.html b/aio/content/examples/upgrade-module/src/index-bootstrap.html
index bc4614e5624..8d9534f95cd 100644
--- a/aio/content/examples/upgrade-module/src/index-bootstrap.html
+++ b/aio/content/examples/upgrade-module/src/index-bootstrap.html
@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
   <head>
     <base href="/">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
diff --git a/aio/content/examples/upgrade-module/src/index-downgrade-io.html b/aio/content/examples/upgrade-module/src/index-downgrade-io.html
index 71e55db3551..0d71f04404b 100644
--- a/aio/content/examples/upgrade-module/src/index-downgrade-io.html
+++ b/aio/content/examples/upgrade-module/src/index-downgrade-io.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
   <head>
     <title>Angular Upgrade</title>
     <base href="/">
diff --git a/aio/content/examples/upgrade-module/src/index-downgrade-static.html b/aio/content/examples/upgrade-module/src/index-downgrade-static.html
index 47ec27e8f42..fe4e327292e 100644
--- a/aio/content/examples/upgrade-module/src/index-downgrade-static.html
+++ b/aio/content/examples/upgrade-module/src/index-downgrade-static.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
   <head>
     <title>Angular Upgrade</title>
     <base href="/">
diff --git a/aio/content/examples/upgrade-module/src/index-ng-app.html b/aio/content/examples/upgrade-module/src/index-ng-app.html
index 0bd661faaef..3bf6233bebc 100644
--- a/aio/content/examples/upgrade-module/src/index-ng-app.html
+++ b/aio/content/examples/upgrade-module/src/index-ng-app.html
@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
   <head>
     <base href="/">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
diff --git a/aio/content/examples/upgrade-module/src/index-upgrade-io.html b/aio/content/examples/upgrade-module/src/index-upgrade-io.html
index 2dca0d44d44..7d87a2fa274 100644
--- a/aio/content/examples/upgrade-module/src/index-upgrade-io.html
+++ b/aio/content/examples/upgrade-module/src/index-upgrade-io.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
   <head>
     <title>Angular Upgrade</title>
     <base href="/">
diff --git a/aio/content/examples/upgrade-module/src/index-upgrade-static.html b/aio/content/examples/upgrade-module/src/index-upgrade-static.html
index 9134cfbc327..bd36796c551 100644
--- a/aio/content/examples/upgrade-module/src/index-upgrade-static.html
+++ b/aio/content/examples/upgrade-module/src/index-upgrade-static.html
@@ -1,5 +1,5 @@
 <!DOCTYPE HTML>
-<html>
+<html lang="en">
   <head>
     <title>Angular Upgrade</title>
     <base href="/">
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/example-config.json b/aio/content/examples/upgrade-phonecat-1-typescript/example-config.json
index a8781b9a314..a76722119ff 100644
--- a/aio/content/examples/upgrade-phonecat-1-typescript/example-config.json
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/example-config.json
@@ -1,4 +1,5 @@
 {
   "build": "build:upgrade",
-  "run": "serve:upgrade"
+  "run": "serve:upgrade",
+  "projectType": "systemjs"
 }
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/example-config.json b/aio/content/examples/upgrade-phonecat-2-hybrid/example-config.json
index 401c14f835b..a76722119ff 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/example-config.json
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/example-config.json
@@ -1,5 +1,5 @@
 {
   "build": "build:upgrade",
   "run": "serve:upgrade",
-  "unittesting": true
+  "projectType": "systemjs"
 }
diff --git a/aio/content/examples/testing/karma-test-shim.js b/aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js
similarity index 100%
rename from aio/content/examples/testing/karma-test-shim.js
rename to aio/content/examples/upgrade-phonecat-2-hybrid/karma-test-shim.js
diff --git a/aio/content/examples/testing/karma.conf.js b/aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js
similarity index 100%
rename from aio/content/examples/testing/karma.conf.js
rename to aio/content/examples/upgrade-phonecat-2-hybrid/karma.conf.js
diff --git a/aio/content/examples/upgrade-phonecat-3-final/example-config.json b/aio/content/examples/upgrade-phonecat-3-final/example-config.json
index 401c14f835b..a76722119ff 100644
--- a/aio/content/examples/upgrade-phonecat-3-final/example-config.json
+++ b/aio/content/examples/upgrade-phonecat-3-final/example-config.json
@@ -1,5 +1,5 @@
 {
   "build": "build:upgrade",
   "run": "serve:upgrade",
-  "unittesting": true
+  "projectType": "systemjs"
 }
diff --git a/aio/content/examples/upgrade-phonecat-3-final/karma-test-shim.js b/aio/content/examples/upgrade-phonecat-3-final/karma-test-shim.js
new file mode 100644
index 00000000000..1b8d6acdd4d
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/karma-test-shim.js
@@ -0,0 +1,96 @@
+// #docregion
+// /*global jasmine, __karma__, window*/
+Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
+
+// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
+// Error.stackTraceLimit = Infinity; //
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
+
+// builtPaths: root paths for output ("built") files
+// get from karma.config.js, then prefix with '/src/' (default is 'app/')
+var builtPaths = (__karma__.config.builtPaths || ['src/'])
+                 .map(function(p) { return '/base/'+p;});
+
+__karma__.loaded = function () { };
+
+function isJsFile(path) {
+  return path.slice(-3) == '.js';
+}
+
+function isSpecFile(path) {
+  return /\.spec\.(.*\.)?js$/.test(path);
+}
+
+// Is a "built" file if is JavaScript file in one of the "built" folders
+function isBuiltFile(path) {
+  return isJsFile(path) &&
+         builtPaths.reduce(function(keep, bp) {
+           return keep || (path.substr(0, bp.length) === bp);
+         }, false);
+}
+
+var allSpecFiles = Object.keys(window.__karma__.files)
+  .filter(isSpecFile)
+  .filter(isBuiltFile);
+
+System.config({
+  baseURL: 'base/src',
+  // Extend usual application package list with testing folder
+  packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } },
+
+  // Assume npm: is set in `paths` in systemjs.config
+  // Map the angular testing umd bundles
+  map: {
+    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
+    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
+    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
+    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
+    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
+    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
+    '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
+  },
+});
+
+System.import('systemjs.config.js')
+  .then(importSystemJsExtras)
+  .then(initTestBed)
+  .then(initTesting);
+
+/** Optional SystemJS configuration extras. Keep going w/o it */
+function importSystemJsExtras(){
+  return System.import('systemjs.config.extras.js')
+  .catch(function(reason) {
+    console.log(
+      'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.'
+    );
+    console.log(reason);
+  });
+}
+
+function initTestBed(){
+  return Promise.all([
+    System.import('@angular/core/testing'),
+    System.import('@angular/platform-browser-dynamic/testing')
+  ])
+
+  .then(function (providers) {
+    var coreTesting    = providers[0];
+    var browserTesting = providers[1];
+
+    coreTesting.TestBed.initTestEnvironment(
+      browserTesting.BrowserDynamicTestingModule,
+      browserTesting.platformBrowserDynamicTesting());
+  })
+}
+
+// Import all spec files and start karma
+function initTesting () {
+  return Promise.all(
+    allSpecFiles.map(function (moduleName) {
+      return System.import(moduleName);
+    })
+  )
+  .then(__karma__.start, __karma__.error);
+}
diff --git a/aio/content/examples/upgrade-phonecat-3-final/karma.conf.js b/aio/content/examples/upgrade-phonecat-3-final/karma.conf.js
new file mode 100644
index 00000000000..a00b8add542
--- /dev/null
+++ b/aio/content/examples/upgrade-phonecat-3-final/karma.conf.js
@@ -0,0 +1,98 @@
+// #docregion
+module.exports = function(config) {
+
+  var appBase    = 'src/';       // transpiled app JS and map files
+  var appAssets  = '/base/app/'; // component assets fetched by Angular's compiler
+
+  // Testing helpers (optional) are conventionally in a folder called `testing`
+  var testingBase    = 'src/testing/'; // transpiled test JS and map files
+  var testingSrcBase = 'src/testing/'; // test source TS files
+
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine'],
+
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter')
+    ],
+
+    client: {
+      builtPaths: [appBase, testingBase], // add more spec base paths as needed
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+
+    customLaunchers: {
+      // From the CLI. Not used here but interesting
+      // chrome setup for travis CI using chromium
+      Chrome_travis_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
+
+    files: [
+      // System.js for module loading
+      'node_modules/systemjs/dist/system.src.js',
+
+      // Polyfills
+      'node_modules/core-js/client/shim.js',
+
+      // zone.js
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/zone.js/dist/long-stack-trace-zone.js',
+      'node_modules/zone.js/dist/proxy.js',
+      'node_modules/zone.js/dist/sync-test.js',
+      'node_modules/zone.js/dist/jasmine-patch.js',
+      'node_modules/zone.js/dist/async-test.js',
+      'node_modules/zone.js/dist/fake-async-test.js',
+
+      // RxJs
+      { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
+      { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
+
+      // Paths loaded via module imports:
+      // Angular itself
+      { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false },
+      { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false },
+
+      { pattern: appBase + '/systemjs.config.js', included: false, watched: false },
+      { pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false },
+      'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels
+
+      // transpiled application & spec code paths loaded via module imports
+      { pattern: appBase + '**/*.js', included: false, watched: true },
+      { pattern: testingBase + '**/*.js', included: false, watched: true },
+
+
+      // Asset (HTML & CSS) paths loaded via Angular's component compiler
+      // (these paths need to be rewritten, see proxies section)
+      { pattern: appBase + '**/*.html', included: false, watched: true },
+      { pattern: appBase + '**/*.css', included: false, watched: true },
+
+      // Paths for debugging with source maps in dev tools
+      { pattern: appBase + '**/*.ts', included: false, watched: false },
+      { pattern: appBase + '**/*.js.map', included: false, watched: false },
+      { pattern: testingSrcBase + '**/*.ts', included: false, watched: false },
+      { pattern: testingBase + '**/*.js.map', included: false, watched: false}
+    ],
+
+    // Proxied base paths for loading assets
+    proxies: {
+      // required for modules fetched by SystemJS
+      '/base/src/node_modules/': '/base/node_modules/'
+    },
+
+    exclude: [],
+    preprocessors: {},
+    reporters: ['progress', 'kjhtml'],
+
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  })
+}
diff --git a/aio/content/examples/user-input/e2e-spec.ts b/aio/content/examples/user-input/e2e/app.e2e-spec.ts
similarity index 84%
rename from aio/content/examples/user-input/e2e-spec.ts
rename to aio/content/examples/user-input/e2e/app.e2e-spec.ts
index 3f178382c73..b70bd2f1131 100644
--- a/aio/content/examples/user-input/e2e-spec.ts
+++ b/aio/content/examples/user-input/e2e/app.e2e-spec.ts
@@ -9,8 +9,8 @@ describe('User Input Tests', function () {
   });
 
   it('should support the click event', function () {
-    let mainEle = element(by.css('click-me'));
-    let buttonEle = element(by.css('click-me button'));
+    let mainEle = element(by.css('app-click-me'));
+    let buttonEle = element(by.css('app-click-me button'));
     expect(mainEle.getText()).not.toContain('You are my hero!');
     buttonEle.click().then(function() {
       expect(mainEle.getText()).toContain('You are my hero!');
@@ -18,8 +18,8 @@ describe('User Input Tests', function () {
   });
 
   it('should support the click event with an event payload', function () {
-    let mainEle = element(by.css('click-me2'));
-    let buttonEle = element(by.css('click-me2 button'));
+    let mainEle = element(by.css('app-click-me2'));
+    let buttonEle = element(by.css('app-click-me2 button'));
     expect(mainEle.getText()).not.toContain('Event target is ');
     buttonEle.click().then(function() {
       expect(mainEle.getText()).toContain('Event target is BUTTON');
@@ -27,7 +27,7 @@ describe('User Input Tests', function () {
   });
 
   it('should support the keyup event ', function () {
-    let mainEle = element(by.css('key-up1'));
+    let mainEle = element(by.css('app-key-up1'));
     let inputEle = mainEle.element(by.css('input'));
     let outputTextEle = mainEle.element(by.css('p'));
     expect(outputTextEle.getText()).toEqual('');
@@ -36,7 +36,7 @@ describe('User Input Tests', function () {
   });
 
   it('should support user input from a local template let (loopback)', function () {
-    let mainEle = element(by.css('loop-back'));
+    let mainEle = element(by.css('app-loop-back'));
     let inputEle = mainEle.element(by.css('input'));
     let outputTextEle = mainEle.element(by.css('p'));
     expect(outputTextEle.getText()).toEqual('');
@@ -45,7 +45,7 @@ describe('User Input Tests', function () {
   });
 
   it('should be able to combine click event with a local template var', function () {
-    let mainEle = element(by.css('key-up2'));
+    let mainEle = element(by.css('app-key-up2'));
     let inputEle = mainEle.element(by.css('input'));
     let outputTextEle = mainEle.element(by.css('p'));
     expect(outputTextEle.getText()).toEqual('');
@@ -54,7 +54,7 @@ describe('User Input Tests', function () {
   });
 
   it('should be able to filter key events', () => {
-    let mainEle = element(by.css('key-up3'));
+    let mainEle = element(by.css('app-key-up3'));
     let inputEle = mainEle.element(by.css('input'));
     let outputTextEle = mainEle.element(by.css('p'));
     expect(outputTextEle.getText()).toEqual('');
@@ -66,8 +66,8 @@ describe('User Input Tests', function () {
   });
 
   it('should be able to filter blur events', function () {
-    let prevInputEle = element(by.css('key-up3 input'));
-    let mainEle = element(by.css('key-up4'));
+    let prevInputEle = element(by.css('app-key-up3 input'));
+    let mainEle = element(by.css('app-key-up4'));
     let inputEle = mainEle.element(by.css('input'));
     let outputTextEle = mainEle.element(by.css('p'));
     expect(outputTextEle.getText()).toEqual('');
@@ -80,7 +80,7 @@ describe('User Input Tests', function () {
   });
 
   it('should be able to compose little tour of heroes', function () {
-    let mainEle = element(by.css('little-tour'));
+    let mainEle = element(by.css('app-little-tour'));
     let inputEle = mainEle.element(by.css('input'));
     let addButtonEle = mainEle.element(by.css('button'));
     let heroEles = mainEle.all(by.css('li'));
diff --git a/aio/content/examples/user-input/src/app/app.component.html b/aio/content/examples/user-input/src/app/app.component.html
index 036b04c510c..303d7c0a0bf 100644
--- a/aio/content/examples/user-input/src/app/app.component.html
+++ b/aio/content/examples/user-input/src/app/app.component.html
@@ -1,27 +1,27 @@
 <p>
-  <click-me></click-me>
+  <app-click-me></app-click-me>
 </p>
 
 <p>
-  <click-me2></click-me2>
+  <app-click-me2></app-click-me2>
 </p>
 
 <h4>Give me some keys!</h4>
-<div><key-up1></key-up1></div>
+<div><app-key-up1></app-key-up1></div>
 
 <h4>keyup loop-back component</h4>
-<div><loop-back></loop-back></div>
+<div><app-loop-back></app-loop-back></div>
 <br><br>
 
 <h4>Give me some more keys!</h4>
-<div><key-up2></key-up2></div>
+<div><app-key-up2></app-key-up2></div>
 
 <h4>Type away! Press [enter] when done.</h4>
-<div><key-up3></key-up3></div>
+<div><app-key-up3></app-key-up3></div>
 
 <h4>Type away! Press [enter] or click elsewhere when done.</h4>
-<div><key-up4></key-up4></div>
+<div><app-key-up4></app-key-up4></div>
 
 <h4>Little Tour of Heroes</h4>
 <p><i>Add a new hero</i></p>
-<div><little-tour></little-tour></div>
\ No newline at end of file
+<div><app-little-tour></app-little-tour></div>
diff --git a/aio/content/examples/user-input/src/app/app.component.ts b/aio/content/examples/user-input/src/app/app.component.ts
index 5f885d5105b..62559093060 100644
--- a/aio/content/examples/user-input/src/app/app.component.ts
+++ b/aio/content/examples/user-input/src/app/app.component.ts
@@ -2,7 +2,7 @@
 import { Component }           from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent { }
diff --git a/aio/content/examples/user-input/src/app/click-me.component.ts b/aio/content/examples/user-input/src/app/click-me.component.ts
index 45a4ca7e705..0f70e2eadd1 100644
--- a/aio/content/examples/user-input/src/app/click-me.component.ts
+++ b/aio/content/examples/user-input/src/app/click-me.component.ts
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
 
 // #docregion click-me-component
 @Component({
-  selector: 'click-me',
+  selector: 'app-click-me',
   template: `
     <button (click)="onClickMe()">Click me!</button>
     {{clickMessage}}`
diff --git a/aio/content/examples/user-input/src/app/click-me2.component.ts b/aio/content/examples/user-input/src/app/click-me2.component.ts
index 1e35731a825..476d5db9694 100644
--- a/aio/content/examples/user-input/src/app/click-me2.component.ts
+++ b/aio/content/examples/user-input/src/app/click-me2.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'click-me2',
+  selector: 'app-click-me2',
   template: `
     <button (click)="onClickMe2($event)">No! .. Click me!</button>
     {{clickMessage}}`
diff --git a/aio/content/examples/user-input/src/app/keyup.components.ts b/aio/content/examples/user-input/src/app/keyup.components.ts
index 94ed1ae4239..e561a3ce7ad 100644
--- a/aio/content/examples/user-input/src/app/keyup.components.ts
+++ b/aio/content/examples/user-input/src/app/keyup.components.ts
@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
 
 // #docregion key-up-component-1
 @Component({
-  selector: 'key-up1',
+  selector: 'app-key-up1',
 // #docregion key-up-component-1-template
   template: `
     <input (keyup)="onKey($event)">
@@ -38,7 +38,7 @@ export class KeyUpComponent_v1 {
 
 // #docregion key-up-component-2
 @Component({
-  selector: 'key-up2',
+  selector: 'app-key-up2',
   template: `
     <input #box (keyup)="onKey(box.value)">
     <p>{{values}}</p>
@@ -56,7 +56,7 @@ export class KeyUpComponent_v2 {
 
 // #docregion key-up-component-3
 @Component({
-  selector: 'key-up3',
+  selector: 'app-key-up3',
   template: `
     <input #box (keyup.enter)="onEnter(box.value)">
     <p>{{value}}</p>
@@ -72,7 +72,7 @@ export class KeyUpComponent_v3 {
 
 // #docregion key-up-component-4
 @Component({
-  selector: 'key-up4',
+  selector: 'app-key-up4',
   template: `
     <input #box
       (keyup.enter)="update(box.value)"
diff --git a/aio/content/examples/user-input/src/app/little-tour.component.ts b/aio/content/examples/user-input/src/app/little-tour.component.ts
index 5862f033d66..2b8936e906e 100644
--- a/aio/content/examples/user-input/src/app/little-tour.component.ts
+++ b/aio/content/examples/user-input/src/app/little-tour.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 
 // #docregion little-tour
 @Component({
-  selector: 'little-tour',
+  selector: 'app-little-tour',
   template: `
     <input #newHero
       (keyup.enter)="addHero(newHero.value)"
diff --git a/aio/content/examples/user-input/src/app/loop-back.component.ts b/aio/content/examples/user-input/src/app/loop-back.component.ts
index 6c9dad1da84..229123f3de5 100644
--- a/aio/content/examples/user-input/src/app/loop-back.component.ts
+++ b/aio/content/examples/user-input/src/app/loop-back.component.ts
@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 // #docregion loop-back-component
 @Component({
-  selector: 'loop-back',
+  selector: 'app-loop-back',
   template: `
     <input #box (keyup)="0">
     <p>{{box.value}}</p>
diff --git a/aio/content/examples/user-input/src/user-input-styles.css b/aio/content/examples/user-input/src/assets/user-input-styles.css
similarity index 100%
rename from aio/content/examples/user-input/src/user-input-styles.css
rename to aio/content/examples/user-input/src/assets/user-input-styles.css
diff --git a/aio/content/examples/user-input/src/index.html b/aio/content/examples/user-input/src/index.html
index 9728814107e..04e2ed51d77 100644
--- a/aio/content/examples/user-input/src/index.html
+++ b/aio/content/examples/user-input/src/index.html
@@ -1,27 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <title>User Input</title>
     <base href="/">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="user-input-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>
+    <link rel="stylesheet" href="assets/user-input-styles.css">
   </head>
 
   <body>
-    <my-app>Loading...</my-app>
+    <app-root></app-root>
   </body>
 
 </html>
diff --git a/aio/content/examples/user-input/src/main.ts b/aio/content/examples/user-input/src/main.ts
index 311c44b76de..a9ca1caf8ce 100644
--- a/aio/content/examples/user-input/src/main.ts
+++ b/aio/content/examples/user-input/src/main.ts
@@ -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);
diff --git a/aio/content/examples/webpack/example-config.json b/aio/content/examples/webpack/example-config.json
index e405d0c01a6..96e6897378f 100644
--- a/aio/content/examples/webpack/example-config.json
+++ b/aio/content/examples/webpack/example-config.json
@@ -1,4 +1,5 @@
 {
   "build": "build:webpack",
-  "run": "serve:cli"
+  "run": "serve:cli",
+  "projectType": "systemjs"
 }
diff --git a/aio/content/guide/component-interaction.md b/aio/content/guide/component-interaction.md
index e99b597456e..69d07c8c554 100644
--- a/aio/content/guide/component-interaction.md
+++ b/aio/content/guide/component-interaction.md
@@ -61,7 +61,7 @@ The running application displays three heroes:
 E2E test that all children were instantiated and displayed as expected:
 
 
-<code-example path="component-interaction/e2e-spec.ts" region="parent-to-child" title="component-interaction/e2e-spec.ts">
+<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="parent-to-child" title="component-interaction/e2e/app.e2e-spec.ts">
 
 </code-example>
 
@@ -105,7 +105,7 @@ Here's the `NameParentComponent` demonstrating name variations including a name
 E2E tests of input property setter with empty and non-empty names:
 
 
-<code-example path="component-interaction/e2e-spec.ts" region="parent-to-child-setter" title="component-interaction/e2e-spec.ts">
+<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="parent-to-child-setter" title="component-interaction/e2e/app.e2e-spec.ts">
 
 </code-example>
 
@@ -164,7 +164,7 @@ Test that ***both*** input properties are set initially and that button clicks t
 the expected `ngOnChanges` calls and values:
 
 
-<code-example path="component-interaction/e2e-spec.ts" region="parent-to-child-onchanges" title="component-interaction/e2e-spec.ts">
+<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="parent-to-child-onchanges" title="component-interaction/e2e/app.e2e-spec.ts">
 
 </code-example>
 
@@ -217,7 +217,7 @@ and the method processes it:
 Test that clicking the *Agree* and *Disagree* buttons update the appropriate counters:
 
 
-<code-example path="component-interaction/e2e-spec.ts" region="child-to-parent" title="component-interaction/e2e-spec.ts">
+<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="child-to-parent" title="component-interaction/e2e/app.e2e-spec.ts">
 
 </code-example>
 
@@ -284,7 +284,7 @@ match the seconds displayed in the child's status message.
 Test also that clicking the *Stop* button pauses the countdown timer:
 
 
-<code-example path="component-interaction/e2e-spec.ts" region="countdown-timer-tests" title="component-interaction/e2e-spec.ts">
+<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="countdown-timer-tests" title="component-interaction/e2e/app.e2e-spec.ts">
 
 </code-example>
 
@@ -432,7 +432,7 @@ Tests click buttons of both the parent `MissionControlComponent` and the `Astron
 and verify that the history meets expectations:
 
 
-<code-example path="component-interaction/e2e-spec.ts" region="bidirectional-service" title="component-interaction/e2e-spec.ts">
+<code-example path="component-interaction/e2e/app.e2e-spec.ts" region="bidirectional-service" title="component-interaction/e2e/app.e2e-spec.ts">
 
 </code-example>
 
diff --git a/aio/content/guide/form-validation.md b/aio/content/guide/form-validation.md
index ca73199dd58..a0c62313698 100644
--- a/aio/content/guide/form-validation.md
+++ b/aio/content/guide/form-validation.md
@@ -200,7 +200,7 @@ Like in AngularJS, Angular automatically mirrors many control properties onto th
 The hero form uses the `.ng-valid` and `.ng-invalid` classes to 
 set the color of each form control's border.
 
-<code-example path="form-validation/src/forms.css" title="forms.css (status classes)">
+<code-example path="form-validation/src/assets/forms.css" title="forms.css (status classes)">
 
 </code-example>
 
diff --git a/aio/content/guide/forms.md b/aio/content/guide/forms.md
index 81db1c12947..8731b34d73d 100644
--- a/aio/content/guide/forms.md
+++ b/aio/content/guide/forms.md
@@ -673,7 +673,7 @@ You achieve this effect by adding these class definitions to a new `forms.css` f
 that you add to the project as a sibling to `index.html`:
 
 
-<code-example path="forms/src/forms.css" title="src/forms.css">
+<code-example path="forms/src/assets/forms.css" title="src/assets/forms.css">
 
 </code-example>
 
@@ -1047,7 +1047,7 @@ Here’s the code for the final version of the application:
 
   </code-pane>
 
-  <code-pane title="forms.css" path="forms/src/forms.css">
+  <code-pane title="forms.css" path="forms/src/assets/forms.css">
 
   </code-pane>
 
diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md
index 963e327cf23..056bd37db18 100644
--- a/aio/content/guide/testing.md
+++ b/aio/content/guide/testing.md
@@ -3770,18 +3770,6 @@ is a topic beyond the scope of this guide .
 
   </tr>
 
-  <tr>
-
-    <td colspan="2">
-
-      <code-example path="testing/src/systemjs.config.extras.js" title="systemjs.config.extras.js" linenums="false">
-
-      </code-example>
-
-    </td>
-
-  </tr>
-
 </table>
 
 
diff --git a/aio/content/tutorial/toh-pt5.md b/aio/content/tutorial/toh-pt5.md
index bde66a4101c..024f6e85b9f 100644
--- a/aio/content/tutorial/toh-pt5.md
+++ b/aio/content/tutorial/toh-pt5.md
@@ -1208,12 +1208,6 @@ Here's an excerpt:
 
 Create the file <code>styles.css</code>.
 Ensure that the file contains the [master styles provided here](https://raw.githubusercontent.com/angular/angular/master/aio/tools/examples/shared/boilerplate/src/styles.css).
-Also edit <code>index.html</code> to refer to this stylesheet.
-
-
-<code-example path="toh-pt5/src/index.html" region="css" title="src/index.html (link ref)">
-
-</code-example>
 
 
 
diff --git a/aio/tools/example-zipper/customizer/package-json/cli.json b/aio/tools/example-zipper/customizer/package-json/cli.json
index 8c367c67d66..8e689c7d498 100644
--- a/aio/tools/example-zipper/customizer/package-json/cli.json
+++ b/aio/tools/example-zipper/customizer/package-json/cli.json
@@ -6,9 +6,13 @@
     { "name": "lint", "command": "ng lint" },
     { "name": "e2e", "command": "ng e2e" }
   ],
-  "dependencies": [],
+  "dependencies": [
+    "web-animations-js"
+  ],
   "devDependencies": [
     "@angular/cli",
+    "@types/jasminewd2",
+    "karma-coverage-istanbul-reporter",
     "ts-node"
   ]
 }
diff --git a/aio/tools/example-zipper/customizer/package-json/packageJsonCustomizer.js b/aio/tools/example-zipper/customizer/package-json/packageJsonCustomizer.js
index 9a086619bed..02858dacf0d 100644
--- a/aio/tools/example-zipper/customizer/package-json/packageJsonCustomizer.js
+++ b/aio/tools/example-zipper/customizer/package-json/packageJsonCustomizer.js
@@ -8,7 +8,7 @@ const packageFolder = path.resolve(__dirname);
 class PackageJsonCustomizer {
   constructor() {
     this.dependenciesPackageJson = require(path.join(examplesPath, '/shared/package.json'));
-    this.scriptsPackageJson = require(path.join(examplesPath, '/shared/boilerplate/package.json'));
+    this.scriptsPackageJson = require(path.join(examplesPath, '/shared/boilerplate/systemjs/package.json'));
     this.basePackageJson = require(`${packageFolder}/base.json`);
   }
 
diff --git a/aio/tools/example-zipper/exampleZipper.js b/aio/tools/example-zipper/exampleZipper.js
index dace4b80f82..6f3401466c0 100644
--- a/aio/tools/example-zipper/exampleZipper.js
+++ b/aio/tools/example-zipper/exampleZipper.js
@@ -9,12 +9,14 @@ const globby = require('globby');
 const PackageJsonCustomizer = require('./customizer/package-json/packageJsonCustomizer');
 const regionExtractor = require('../transforms/examples-package/services/region-parser');
 
+const EXAMPLE_CONFIG_NAME = 'example-config.json';
+
 class ExampleZipper {
   constructor(sourceDirName, outputDirName) {
     this.examplesPackageJson = path.join(__dirname, '../examples/shared/package.json');
-    this.examplesSystemjsConfig = path.join(__dirname, '../examples/shared/boilerplate/src/systemjs.config.js');
-    this.examplesSystemjsLoaderConfig = path.join(__dirname, '../examples/shared/boilerplate/src/systemjs-angular-loader.js');
-    this.exampleTsconfig = path.join(__dirname, '../examples/shared/boilerplate/src/tsconfig.json');
+    this.examplesSystemjsConfig = path.join(__dirname, '../examples/shared/boilerplate/systemjs/src/systemjs.config.js');
+    this.examplesSystemjsLoaderConfig = path.join(__dirname, '../examples/shared/boilerplate/systemjs/src/systemjs-angular-loader.js');
+    this.exampleTsconfig = path.join(__dirname, '../examples/shared/boilerplate/systemjs/src/tsconfig.json');
     this.customizer = new PackageJsonCustomizer();
 
     let gpathPlnkr = path.join(sourceDirName, '**/*plnkr.json');
@@ -43,14 +45,22 @@ class ExampleZipper {
     return archive;
   }
 
+  _getExampleType(sourceFolder) {
+    const filePath = path.join(sourceFolder, EXAMPLE_CONFIG_NAME);
+    try {
+      return require(filePath, 'utf-8').projectType || 'cli';
+    } catch (err) { // empty file, so it is cli
+      return 'cli';
+    }
+  }
+
   _zipExample(configFileName, sourceDirName, outputDirName) {
     let json = require(configFileName, 'utf-8');
-    const exampleType = json.type || 'systemjs';
     const basePath = json.basePath || '';
     const jsonFileName = configFileName.replace(/^.*[\\\/]/, '');
     let relativeDirName = path.dirname(path.relative(sourceDirName, configFileName));
     let exampleZipName;
-
+    const exampleType = this._getExampleType(path.join(sourceDirName, relativeDirName));
     if (relativeDirName.indexOf('/') !== -1) { // Special example
       exampleZipName = relativeDirName.split('/')[0];
     } else {
@@ -60,7 +70,20 @@ class ExampleZipper {
     const exampleDirName = path.dirname(configFileName);
     const outputFileName = path.join(outputDirName, relativeDirName, exampleZipName + '.zip');
     let defaultIncludes = ['**/*.ts', '**/*.js', '**/*.es6', '**/*.css', '**/*.html', '**/*.md', '**/*.json', '**/*.png'];
-    let alwaysIncludes = ['bs-config.json', 'tslint.json', 'karma-test-shim.js', 'karma.conf.js', 'src/testing/**/*', 'src/.babelrc'];
+    let alwaysIncludes = [
+      'bs-config.json',
+      'protractor.conf.js',
+      '.angular-cli.json',
+      '.editorconfig',
+      '.gitignore',
+      'tslint.json',
+      'karma-test-shim.js',
+      'karma.conf.js',
+      'src/testing/**/*',
+      'src/.babelrc',
+      'src/favicon.ico',
+      'src/typings.d.ts'
+    ];
     var defaultExcludes = [
       '!**/bs-config.e2e.json',
       '!**/*plnkr.*',
@@ -70,7 +93,6 @@ class ExampleZipper {
       '!**/package.json',
       '!**/example-config.json',
       '!**/wallaby.js',
-      '!**/tsconfig.json',
       '!**/package.webpack.json',
       // AoT related files
       '!**/aot/**/*.*',
@@ -129,13 +151,13 @@ class ExampleZipper {
     // we need the package.json from _examples root, not the _boilerplate one
     zip.append(this.customizer.generate(exampleType), { name: 'package.json' });
     // also a systemjs config
-    if (!json.removeSystemJsConfig) {
+    if (exampleType === 'systemjs') {
       zip.append(fs.readFileSync(this.examplesSystemjsConfig, 'utf8'), { name: 'src/systemjs.config.js' });
       zip.append(fs.readFileSync(this.examplesSystemjsLoaderConfig, 'utf8'), { name: 'src/systemjs-angular-loader.js' });
+      // a modified tsconfig
+      let tsconfig = fs.readFileSync(this.exampleTsconfig, 'utf8');
+      zip.append(this._changeTypeRoots(tsconfig), {name: 'src/tsconfig.json'});
     }
-    // a modified tsconfig
-    let tsconfig = fs.readFileSync(this.exampleTsconfig, 'utf8');
-    zip.append(this._changeTypeRoots(tsconfig), {name: 'src/tsconfig.json'});
 
     zip.finalize();
   }
diff --git a/aio/tools/examples/example-boilerplate.js b/aio/tools/examples/example-boilerplate.js
index ad64caadc88..73911342c17 100644
--- a/aio/tools/examples/example-boilerplate.js
+++ b/aio/tools/examples/example-boilerplate.js
@@ -7,25 +7,44 @@ const yargs = require('yargs');
 const SHARED_PATH = path.resolve(__dirname, 'shared');
 const SHARED_NODE_MODULES_PATH = path.resolve(SHARED_PATH, 'node_modules');
 const BOILERPLATE_BASE_PATH = path.resolve(SHARED_PATH, 'boilerplate');
+const BOILERPLATE_COMMON_BASE_PATH = path.resolve(BOILERPLATE_BASE_PATH, 'common');
 const EXAMPLES_BASE_PATH = path.resolve(__dirname, '../../content/examples');
 const TESTING_BASE_PATH = path.resolve(EXAMPLES_BASE_PATH, 'testing');
 
-const BOILERPLATE_SRC_PATHS = [
-  'src/styles.css',
-  'src/systemjs-angular-loader.js',
-  'src/systemjs.config.js',
-  'src/tsconfig.json',
-  'bs-config.json',
-  'bs-config.e2e.json',
-  'package.json',
-  'tslint.json'
-];
-
-const BOILERPLATE_TEST_PATHS = [
-  'src/browser-test-shim.js',
-  'karma-test-shim.js',
-  'karma.conf.js'
-];
+const BOILERPLATE_PATHS = {
+  cli: [
+    'src/environments/environment.prod.ts',
+    'src/environments/environment.ts',
+    'src/assets/.gitkeep',
+    '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',
+    'karma.conf.js',
+    'package.json',
+    'protractor.conf.js',
+    'tsconfig.json',
+    'tslint.json'
+  ],
+  systemjs: [
+    'src/systemjs-angular-loader.js',
+    'src/systemjs.config.js',
+    'src/tsconfig.json',
+    'bs-config.json',
+    'bs-config.e2e.json',
+    'package.json',
+    'tslint.json'
+  ],
+  common: [
+    'src/styles.css'
+  ]
+};
 
 const ANGULAR_DIST_PATH = path.resolve(__dirname, '../../../dist');
 const ANGULAR_PACKAGES_PATH = path.resolve(ANGULAR_DIST_PATH, 'packages-dist');
@@ -64,19 +83,20 @@ class ExampleBoilerPlate {
     // Get all the examples folders, indicated by those that contain a `example-config.json` file
     const exampleFolders = this.getFoldersContaining(EXAMPLES_BASE_PATH, EXAMPLE_CONFIG_FILENAME, 'node_modules');
     exampleFolders.forEach(exampleFolder => {
+      const exampleConfig = this.loadJsonFile(path.resolve(exampleFolder, EXAMPLE_CONFIG_FILENAME));
 
       // Link the node modules - requires admin access (on Windows) because it adds symlinks
       const destinationNodeModules = path.resolve(exampleFolder, 'node_modules');
       fs.ensureSymlinkSync(SHARED_NODE_MODULES_PATH, destinationNodeModules);
 
-      // Copy the boilerplate source files
-      BOILERPLATE_SRC_PATHS.forEach(filePath => this.copyFile(BOILERPLATE_BASE_PATH, exampleFolder, filePath));
+      const boilerPlateType = exampleConfig.projectType || 'cli';
+      const boilerPlateBasePath = path.resolve(BOILERPLATE_BASE_PATH, boilerPlateType);
 
-      // Copy the boilerplate test files (if the example is configured to do unit testing)
-      const exampleConfig = this.loadJsonFile(path.resolve(exampleFolder, EXAMPLE_CONFIG_FILENAME));
-      if (exampleConfig.unittesting) {
-        BOILERPLATE_TEST_PATHS.forEach(filePath => this.copyFile(TESTING_BASE_PATH, exampleFolder, filePath));
-      }
+      // Copy the boilerplate specific files
+      BOILERPLATE_PATHS[boilerPlateType].forEach(filePath => this.copyFile(boilerPlateBasePath, exampleFolder, filePath));
+
+      // Copy the boilerplate common files
+      BOILERPLATE_PATHS.common.forEach(filePath => this.copyFile(BOILERPLATE_COMMON_BASE_PATH, exampleFolder, filePath));
     });
   }
 
@@ -132,4 +152,4 @@ module.exports = new ExampleBoilerPlate();
 // If this file was run directly then run the main function,
 if (require.main === module) {
   module.exports.main();
-}
\ No newline at end of file
+}
diff --git a/aio/tools/examples/example-boilerplate.spec.js b/aio/tools/examples/example-boilerplate.spec.js
index f3484590fb9..53ae3dce48e 100644
--- a/aio/tools/examples/example-boilerplate.spec.js
+++ b/aio/tools/examples/example-boilerplate.spec.js
@@ -6,8 +6,11 @@ const path = require('canonical-path');
 
 describe('example-boilerplate tool', () => {
   describe('add', () => {
-    const numberOfBoilerPlateFiles = 8;
-    const numberOfBoilerPlateTestFiles = 3;
+    const BPFiles = {
+      cli: 18,
+      systemjs: 7,
+      common: 1
+    };
     const exampleFolders = ['a/b', 'c/d'];
 
     beforeEach(() => {
@@ -45,11 +48,28 @@ describe('example-boilerplate tool', () => {
       expect(fs.ensureSymlinkSync).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/node_modules'), path.resolve('c/d/node_modules'));
     });
 
-    it('should copy all the source boilerplate files', () => {
+    it('should copy all the source boilerplate files for systemjs', () => {
+      exampleBoilerPlate.loadJsonFile.and.callFake(filePath => filePath.indexOf('a/b') !== -1 ? { projectType: 'systemjs' } : {})
       exampleBoilerPlate.add();
-      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(numberOfBoilerPlateFiles * exampleFolders.length);
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(
+        (BPFiles.cli) +
+        (BPFiles.systemjs) +
+        (BPFiles.common * exampleFolders.length)
+      );
       // for example
-      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/boilerplate'), 'a/b', 'package.json');
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/boilerplate/systemjs'), 'a/b', 'package.json');
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/boilerplate/common'), 'a/b', 'src/styles.css');
+    });
+
+    it('should copy all the source boilerplate files for cli', () => {
+      exampleBoilerPlate.add();
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes(
+        (BPFiles.cli * exampleFolders.length) +
+        (BPFiles.common * exampleFolders.length)
+      );
+      // for example
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/boilerplate/cli'), 'a/b', 'package.json');
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, 'shared/boilerplate/common'), 'c/d', 'src/styles.css');
     });
 
     it('should try to load the example config file', () => {
@@ -58,16 +78,6 @@ describe('example-boilerplate tool', () => {
       expect(exampleBoilerPlate.loadJsonFile).toHaveBeenCalledWith(path.resolve('a/b/example-config.json'));
       expect(exampleBoilerPlate.loadJsonFile).toHaveBeenCalledWith(path.resolve('c/d/example-config.json'));
     });
-
-    it('should copy all the test boilerplate files if unit testing is configured', () => {
-      // configure unit testing for example a/b and not c/d
-      exampleBoilerPlate.loadJsonFile.and.callFake(filePath => filePath.indexOf('a/b') !== -1 ? { unittesting: true } : {});
-      exampleBoilerPlate.add();
-      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledTimes((numberOfBoilerPlateFiles * 2) + numberOfBoilerPlateTestFiles);
-      // for example
-      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(path.resolve(__dirname, '../../content/examples/testing'), 'a/b', 'karma.conf.js');
-      expect(exampleBoilerPlate.copyFile).not.toHaveBeenCalledWith(path.resolve(__dirname, '../../content/examples/testing'), 'c/d', 'karma.conf.js');
-    });
   });
 
   describe('remove', () => {
diff --git a/aio/tools/examples/run-example-e2e.js b/aio/tools/examples/run-example-e2e.js
index 48ceb9cc972..c5e9ea735f8 100644
--- a/aio/tools/examples/run-example-e2e.js
+++ b/aio/tools/examples/run-example-e2e.js
@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('canonical-path');
 const fs = require('fs-extra');
 const argv = require('yargs').argv;
 const globby = require('globby');
@@ -9,10 +9,17 @@ const AIO_PATH = path.join(__dirname, '../../');
 const SHARED_PATH = path.join(__dirname, '/shared');
 const EXAMPLES_PATH = path.join(AIO_PATH, './content/examples/');
 const PROTRACTOR_CONFIG_FILENAME = path.join(__dirname, './shared/protractor.config.js');
-const SPEC_FILENAME = 'e2e-spec.ts';
+const SJS_SPEC_FILENAME = 'e2e-spec.ts';
+const CLI_SPEC_FILENAME = 'e2e/app.e2e-spec.ts';
 const EXAMPLE_CONFIG_FILENAME = 'example-config.json';
-const IGNORED_EXAMPLES = [
-  'ts-to-js/'
+const IGNORED_EXAMPLES = [ // temporary ignores
+  'toh-',
+  'quickstart',
+  'http',
+  'setup',
+  'i18n',
+  'webpack',
+  'upgrade-p'
 ];
 
 /**
@@ -78,36 +85,50 @@ function findAndRunE2eTests(filter, outputFile, shard) {
 
   // Run the tests sequentially.
   const status = { passed: [], failed: [] };
-  return getE2eSpecPaths(EXAMPLES_PATH, filter)
-    .then(e2eSpecPaths => e2eSpecPaths
-      .filter((paths, index) => index % shardDivider === shardModulo)
-      .reduce((promise, specPath) => {
-      return promise.then(() => {
-        const examplePath = path.dirname(specPath);
-        return runE2eTests(examplePath, outputFile).then((ok) => {
-          const arr = ok ? status.passed : status.failed;
-          arr.push(examplePath);
-        });
+  return getE2eSpecs(EXAMPLES_PATH, filter)
+    .then(e2eSpecPaths => {
+      Object.keys(e2eSpecPaths).forEach(key => {
+        const value = e2eSpecPaths[key];
+        e2eSpecPaths[key] = value.filter((p, index) => index % shardDivider === shardModulo)
+      });
+
+      return e2eSpecPaths.systemjs.reduce((promise, specPath) => {
+        return promise.then(() => {
+          const examplePath = path.dirname(specPath);
+          return runE2eTestsSystemJS(examplePath, outputFile).then(ok => {
+            const arr = ok ? status.passed : status.failed;
+            arr.push(examplePath);
+          });
+        });
+      }, Promise.resolve())
+      .then(() => {
+        return e2eSpecPaths.cli.reduce((promise, specPath) => {
+          return promise.then(() => {
+            return runE2eTestsCLI(specPath, outputFile).then(ok => {
+              const arr = ok ? status.passed : status.failed;
+              arr.push(specPath);
+            });
+          });
+        }, Promise.resolve())
+      })})
+      .then(() => {
+        const stopTime = new Date().getTime();
+        status.elapsedTime = (stopTime - startTime) / 1000;
+        return status;
       });
-    }, Promise.resolve()))
-    .then(function () {
-      const stopTime = new Date().getTime();
-      status.elapsedTime = (stopTime - startTime) / 1000;
-      return status;
-    });
 }
 
 // Start the example in appDir; then run protractor with the specified
 // fileName; then shut down the example.
 // All protractor output is appended to the outputFile.
-function runE2eTests(appDir, outputFile) {
-
+// SystemJS version
+function runE2eTestsSystemJS(appDir, outputFile) {
   const config = loadExampleConfig(appDir);
 
   const appBuildSpawnInfo = spawnExt('yarn', [config.build], { cwd: appDir });
   const appRunSpawnInfo = spawnExt('yarn', [config.run, '--', '-s'], { cwd: appDir }, true);
 
-  let run = runProtractor(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile);
+  let run = runProtractorSystemJS(appBuildSpawnInfo.promise, appDir, appRunSpawnInfo, outputFile);
 
   if (fs.existsSync(appDir + '/aot/index.html')) {
     run = run.then((ok) => ok && runProtractorAoT(appDir, outputFile));
@@ -115,8 +136,8 @@ function runE2eTests(appDir, outputFile) {
   return run;
 }
 
-function runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile) {
-  const specFilename = path.resolve(`${appDir}/${SPEC_FILENAME}`);
+function runProtractorSystemJS(prepPromise, appDir, appRunSpawnInfo, outputFile) {
+  const specFilename = path.resolve(`${appDir}/${SJS_SPEC_FILENAME}`);
   return prepPromise
     .catch(function () {
       const emsg = `Application at ${appDir} failed to transpile.\n\n`;
@@ -149,16 +170,16 @@ function runProtractor(prepPromise, appDir, appRunSpawnInfo, outputFile) {
       });
     })
     .then(
-    function () { return finish(true); },
-    function () { return finish(false); }
+    function () { return finish(appRunSpawnInfo.proc.pid, true); },
+    function () { return finish(appRunSpawnInfo.proc.pid, false); }
     )
+}
 
-  function finish(ok) {
-    // Ugh... proc.kill does not work properly on windows with child processes.
-    // appRun.proc.kill();
-    treeKill(appRunSpawnInfo.proc.pid);
-    return ok;
-  }
+function finish(spawnProcId, ok) {
+  // Ugh... proc.kill does not work properly on windows with child processes.
+  // appRun.proc.kill();
+  treeKill(spawnProcId);
+  return ok;
 }
 
 // Run e2e tests over the AOT build for projects that examples it.
@@ -172,7 +193,26 @@ function runProtractorAoT(appDir, outputFile) {
     promise = promise.then(() => spawnExt('node', [copyFileCmd], { cwd: appDir }).promise);
   }
   const aotRunSpawnInfo = spawnExt('yarn', ['serve:aot'], { cwd: appDir }, true);
-  return runProtractor(promise, appDir, aotRunSpawnInfo, outputFile);
+  return runProtractorSystemJS(promise, appDir, aotRunSpawnInfo, outputFile);
+}
+
+// Start the example in appDir; then run protractor with the specified
+// fileName; then shut down the example.
+// All protractor output is appended to the outputFile.
+// CLI version
+function runE2eTestsCLI(appDir, outputFile) {
+  // --preserve-symlinks is needed due the symlinked node_modules in each example
+  const e2eSpawn = spawnExt('ng', ['e2e', '--preserve-symlinks'], { cwd: appDir });
+  return e2eSpawn.promise.then(
+    function () {
+      fs.appendFileSync(outputFile, `Passed: ${appDir}\n\n`);
+      return finish(e2eSpawn.proc.pid, true);
+    },
+    function () {
+      fs.appendFileSync(outputFile, `Failed: ${appDir}\n\n`);
+      return finish(e2eSpawn.proc.pid, false);
+    }
+  );
 }
 
 // Report final status.
@@ -231,18 +271,34 @@ function spawnExt(command, args, options, ignoreClose = false) {
   return { proc, promise };
 }
 
+function getE2eSpecs(basePath, filter) {
+  let specs = {};
+
+  return getE2eSpecsFor(basePath, SJS_SPEC_FILENAME, filter).then(sjsPaths => {
+    specs.systemjs = sjsPaths;
+  }).then(() => {
+    return getE2eSpecsFor(basePath, CLI_SPEC_FILENAME, filter).then(cliPaths => {
+      return cliPaths.map(p => {
+        return p.replace(`${CLI_SPEC_FILENAME}`, '');
+      });
+    });
+  }).then(cliPaths => {
+    specs.cli = cliPaths;
+  }).then(() => specs);
+}
+
 // Find all e2e specs in a given example folder.
-function getE2eSpecPaths(basePath, filter) {
+function getE2eSpecsFor(basePath, specFile, filter) {
   // Only get spec file at the example root.
-  const e2eSpecGlob = `${filter ? `*${filter}*` : '*'}/${SPEC_FILENAME}`;
+  const e2eSpecGlob = `${filter ? `*${filter}*` : '*'}/${specFile}`;
   return globby(e2eSpecGlob, { cwd: basePath, nodir: true })
     .then(paths => paths
-      .filter(file => IGNORED_EXAMPLES.some(ignored => !file.startsWith(ignored)))
+      .filter(file => !IGNORED_EXAMPLES.some(ignored => file.startsWith(ignored)))
       .map(file => path.join(basePath, file))
     );
 }
 
-// Load configuration for an example.
+// Load configuration for an example. Used for SystemJS
 function loadExampleConfig(exampleFolder) {
   // Default config.
   let config = {
diff --git a/aio/content/examples/cli-quickstart/.angular-cli.json b/aio/tools/examples/shared/boilerplate/cli/.angular-cli.json
similarity index 78%
rename from aio/content/examples/cli-quickstart/.angular-cli.json
rename to aio/tools/examples/shared/boilerplate/cli/.angular-cli.json
index 49a6b93bd0a..c30a9c8f45c 100644
--- a/aio/content/examples/cli-quickstart/.angular-cli.json
+++ b/aio/tools/examples/shared/boilerplate/cli/.angular-cli.json
@@ -1,7 +1,7 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "name": "master-project"
+    "name": "angular.io-example"
   },
   "apps": [
     {
@@ -36,13 +36,16 @@
   },
   "lint": [
     {
-      "project": "src/tsconfig.app.json"
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
     },
     {
-      "project": "src/tsconfig.spec.json"
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
     },
     {
-      "project": "e2e/tsconfig.e2e.json"
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
     }
   ],
   "test": {
diff --git a/aio/content/examples/cli-quickstart/.editorconfig b/aio/tools/examples/shared/boilerplate/cli/.editorconfig
similarity index 100%
rename from aio/content/examples/cli-quickstart/.editorconfig
rename to aio/tools/examples/shared/boilerplate/cli/.editorconfig
diff --git a/aio/tools/examples/shared/boilerplate/cli/.gitignore b/aio/tools/examples/shared/boilerplate/cli/.gitignore
new file mode 100644
index 00000000000..6b66814308d
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/.gitignore
@@ -0,0 +1,43 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+yarn-error.log
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/aio/content/examples/cli-quickstart/e2e/app.po.ts b/aio/tools/examples/shared/boilerplate/cli/e2e/app.po.ts
similarity index 63%
rename from aio/content/examples/cli-quickstart/e2e/app.po.ts
rename to aio/tools/examples/shared/boilerplate/cli/e2e/app.po.ts
index 5d821573267..82ea75ba504 100644
--- a/aio/content/examples/cli-quickstart/e2e/app.po.ts
+++ b/aio/tools/examples/shared/boilerplate/cli/e2e/app.po.ts
@@ -1,6 +1,6 @@
-import { browser, element, by } from 'protractor';
+import { browser, by, element } from 'protractor';
 
-export class MyAppPage {
+export class AppPage {
   navigateTo() {
     return browser.get('/');
   }
diff --git a/aio/content/examples/cli-quickstart/e2e/tsconfig.e2e.json b/aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.e2e.json
similarity index 91%
rename from aio/content/examples/cli-quickstart/e2e/tsconfig.e2e.json
rename to aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.e2e.json
index 39b800f7896..1d9e5edf096 100644
--- a/aio/content/examples/cli-quickstart/e2e/tsconfig.e2e.json
+++ b/aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.e2e.json
@@ -2,6 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
     "types": [
diff --git a/aio/tools/examples/shared/boilerplate/cli/karma.conf.js b/aio/tools/examples/shared/boilerplate/cli/karma.conf.js
new file mode 100644
index 00000000000..af139fada36
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/karma.conf.js
@@ -0,0 +1,33 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
diff --git a/aio/tools/examples/shared/boilerplate/cli/package.json b/aio/tools/examples/shared/boilerplate/cli/package.json
new file mode 100644
index 00000000000..59656fd63ee
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "angular.io-example",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^4.2.4",
+    "@angular/common": "^4.2.4",
+    "@angular/compiler": "^4.2.4",
+    "@angular/core": "^4.2.4",
+    "@angular/forms": "^4.2.4",
+    "@angular/http": "^4.2.4",
+    "@angular/platform-browser": "^4.2.4",
+    "@angular/platform-browser-dynamic": "^4.2.4",
+    "@angular/router": "^4.2.4",
+    "core-js": "^2.4.1",
+    "rxjs": "^5.4.2",
+    "web-animations-js": "^2.3.1",
+    "zone.js": "^0.8.14"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.3.1",
+    "@angular/compiler-cli": "^4.2.4",
+    "@angular/language-service": "^4.2.4",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "~3.1.1",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.2",
+    "ts-node": "~3.2.0",
+    "tslint": "~5.3.2",
+    "typescript": "~2.3.3"
+  }
+}
diff --git a/aio/tools/examples/shared/boilerplate/cli/protractor.conf.js b/aio/tools/examples/shared/boilerplate/cli/protractor.conf.js
new file mode 100644
index 00000000000..7ee3b5ee863
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/protractor.conf.js
@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
diff --git a/aio/content/examples/cli-quickstart/src/assets/.gitkeep b/aio/tools/examples/shared/boilerplate/cli/src/assets/.gitkeep
similarity index 100%
rename from aio/content/examples/cli-quickstart/src/assets/.gitkeep
rename to aio/tools/examples/shared/boilerplate/cli/src/assets/.gitkeep
diff --git a/aio/content/examples/cli-quickstart/src/environments/environment.prod.ts b/aio/tools/examples/shared/boilerplate/cli/src/environments/environment.prod.ts
similarity index 100%
rename from aio/content/examples/cli-quickstart/src/environments/environment.prod.ts
rename to aio/tools/examples/shared/boilerplate/cli/src/environments/environment.prod.ts
diff --git a/aio/content/examples/cli-quickstart/src/environments/environment.ts b/aio/tools/examples/shared/boilerplate/cli/src/environments/environment.ts
similarity index 100%
rename from aio/content/examples/cli-quickstart/src/environments/environment.ts
rename to aio/tools/examples/shared/boilerplate/cli/src/environments/environment.ts
diff --git a/aio/content/examples/cli-quickstart/src/favicon.ico b/aio/tools/examples/shared/boilerplate/cli/src/favicon.ico
similarity index 100%
rename from aio/content/examples/cli-quickstart/src/favicon.ico
rename to aio/tools/examples/shared/boilerplate/cli/src/favicon.ico
diff --git a/aio/content/examples/cli-quickstart/src/polyfills.ts b/aio/tools/examples/shared/boilerplate/cli/src/polyfills.ts
similarity index 96%
rename from aio/content/examples/cli-quickstart/src/polyfills.ts
rename to aio/tools/examples/shared/boilerplate/cli/src/polyfills.ts
index 7831e97b79a..998aa96fa48 100644
--- a/aio/content/examples/cli-quickstart/src/polyfills.ts
+++ b/aio/tools/examples/shared/boilerplate/cli/src/polyfills.ts
@@ -46,7 +46,7 @@ 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`.
+ import 'web-animations-js';
 
 
 
diff --git a/aio/content/examples/cli-quickstart/src/test.ts b/aio/tools/examples/shared/boilerplate/cli/src/test.ts
similarity index 94%
rename from aio/content/examples/cli-quickstart/src/test.ts
rename to aio/tools/examples/shared/boilerplate/cli/src/test.ts
index 9bf72267e9b..cd612eeb0e2 100644
--- a/aio/content/examples/cli-quickstart/src/test.ts
+++ b/aio/tools/examples/shared/boilerplate/cli/src/test.ts
@@ -13,8 +13,8 @@ import {
 } 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;
+declare const __karma__: any;
+declare const require: any;
 
 // Prevent Karma from running prematurely.
 __karma__.loaded = function () {};
diff --git a/aio/content/examples/cli-quickstart/src/tsconfig.app.json b/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.app.json
similarity index 74%
rename from aio/content/examples/cli-quickstart/src/tsconfig.app.json
rename to aio/tools/examples/shared/boilerplate/cli/src/tsconfig.app.json
index 5e2507db58c..da9a0bb7ea6 100644
--- a/aio/content/examples/cli-quickstart/src/tsconfig.app.json
+++ b/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.app.json
@@ -2,12 +2,13 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
+    "baseUrl": "./",
     "module": "es2015",
-    "baseUrl": "",
     "types": []
   },
   "exclude": [
     "test.ts",
-    "**/*.spec.ts"
+    "**/*.spec.ts",
+    "testing/**"
   ]
 }
diff --git a/aio/content/examples/cli-quickstart/src/tsconfig.spec.json b/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.spec.json
similarity index 93%
rename from aio/content/examples/cli-quickstart/src/tsconfig.spec.json
rename to aio/tools/examples/shared/boilerplate/cli/src/tsconfig.spec.json
index 510e3f1fdae..63d89ff283f 100644
--- a/aio/content/examples/cli-quickstart/src/tsconfig.spec.json
+++ b/aio/tools/examples/shared/boilerplate/cli/src/tsconfig.spec.json
@@ -2,9 +2,9 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
+    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
-    "baseUrl": "",
     "types": [
       "jasmine",
       "node"
diff --git a/aio/content/examples/cli-quickstart/src/typings.d.ts b/aio/tools/examples/shared/boilerplate/cli/src/typings.d.ts
similarity index 100%
rename from aio/content/examples/cli-quickstart/src/typings.d.ts
rename to aio/tools/examples/shared/boilerplate/cli/src/typings.d.ts
diff --git a/aio/content/examples/cli-quickstart/tsconfig.json b/aio/tools/examples/shared/boilerplate/cli/tsconfig.json
similarity index 90%
rename from aio/content/examples/cli-quickstart/tsconfig.json
rename to aio/tools/examples/shared/boilerplate/cli/tsconfig.json
index a35a8ee3a40..a6c016bf38a 100644
--- a/aio/content/examples/cli-quickstart/tsconfig.json
+++ b/aio/tools/examples/shared/boilerplate/cli/tsconfig.json
@@ -2,7 +2,6 @@
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
-    "baseUrl": "src",
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
@@ -13,7 +12,7 @@
       "node_modules/@types"
     ],
     "lib": [
-      "es2016",
+      "es2017",
       "dom"
     ]
   }
diff --git a/aio/tools/examples/shared/boilerplate/cli/tslint.json b/aio/tools/examples/shared/boilerplate/cli/tslint.json
new file mode 100644
index 00000000000..0db5751c784
--- /dev/null
+++ b/aio/tools/examples/shared/boilerplate/cli/tslint.json
@@ -0,0 +1,142 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "arrow-return-shorthand": true,
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [
+      true,
+      "rxjs"
+    ],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-super": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "typeof-compare": true,
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "no-access-missing-member": true,
+    "templates-use-public": true,
+    "invoke-injectable": true
+  }
+}
diff --git a/aio/tools/examples/shared/boilerplate/src/styles.css b/aio/tools/examples/shared/boilerplate/common/src/styles.css
similarity index 100%
rename from aio/tools/examples/shared/boilerplate/src/styles.css
rename to aio/tools/examples/shared/boilerplate/common/src/styles.css
diff --git a/aio/tools/examples/shared/boilerplate/example-config.json b/aio/tools/examples/shared/boilerplate/example-config.json
deleted file mode 100644
index ff5403e6ca7..00000000000
--- a/aio/tools/examples/shared/boilerplate/example-config.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "build": "build",
-  "run": "serve"
-}
diff --git a/aio/tools/examples/shared/boilerplate/plnkr.json b/aio/tools/examples/shared/boilerplate/plnkr.json
deleted file mode 100644
index 5fb55b50ad9..00000000000
--- a/aio/tools/examples/shared/boilerplate/plnkr.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "description": "QuickStart",
-  "basePath": "src/",
-  "files": [
-    "app/app.component.ts",
-    "index.html"
-  ],
-  "open": "app/app.component.ts",
-  "tags": ["quickstart"]
-}
diff --git a/aio/tools/examples/shared/boilerplate/bs-config.e2e.json b/aio/tools/examples/shared/boilerplate/systemjs/bs-config.e2e.json
similarity index 100%
rename from aio/tools/examples/shared/boilerplate/bs-config.e2e.json
rename to aio/tools/examples/shared/boilerplate/systemjs/bs-config.e2e.json
diff --git a/aio/tools/examples/shared/boilerplate/bs-config.json b/aio/tools/examples/shared/boilerplate/systemjs/bs-config.json
similarity index 100%
rename from aio/tools/examples/shared/boilerplate/bs-config.json
rename to aio/tools/examples/shared/boilerplate/systemjs/bs-config.json
diff --git a/aio/tools/examples/shared/boilerplate/package.json b/aio/tools/examples/shared/boilerplate/systemjs/package.json
similarity index 100%
rename from aio/tools/examples/shared/boilerplate/package.json
rename to aio/tools/examples/shared/boilerplate/systemjs/package.json
diff --git a/aio/tools/examples/shared/boilerplate/src/systemjs-angular-loader.js b/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs-angular-loader.js
similarity index 100%
rename from aio/tools/examples/shared/boilerplate/src/systemjs-angular-loader.js
rename to aio/tools/examples/shared/boilerplate/systemjs/src/systemjs-angular-loader.js
diff --git a/aio/tools/examples/shared/boilerplate/src/systemjs.config.js b/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.js
similarity index 100%
rename from aio/tools/examples/shared/boilerplate/src/systemjs.config.js
rename to aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.js
diff --git a/aio/tools/examples/shared/boilerplate/src/systemjs.config.web.build.js b/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.web.build.js
similarity index 100%
rename from aio/tools/examples/shared/boilerplate/src/systemjs.config.web.build.js
rename to aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.web.build.js
diff --git a/aio/tools/examples/shared/boilerplate/src/systemjs.config.web.js b/aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.web.js
similarity index 100%
rename from aio/tools/examples/shared/boilerplate/src/systemjs.config.web.js
rename to aio/tools/examples/shared/boilerplate/systemjs/src/systemjs.config.web.js
diff --git a/aio/tools/examples/shared/boilerplate/src/tsconfig.json b/aio/tools/examples/shared/boilerplate/systemjs/src/tsconfig.json
similarity index 100%
rename from aio/tools/examples/shared/boilerplate/src/tsconfig.json
rename to aio/tools/examples/shared/boilerplate/systemjs/src/tsconfig.json
diff --git a/aio/tools/examples/shared/boilerplate/tslint.json b/aio/tools/examples/shared/boilerplate/systemjs/tslint.json
similarity index 100%
rename from aio/tools/examples/shared/boilerplate/tslint.json
rename to aio/tools/examples/shared/boilerplate/systemjs/tslint.json
diff --git a/aio/tools/examples/shared/package.json b/aio/tools/examples/shared/package.json
index 5efa4523148..7523692abf7 100644
--- a/aio/tools/examples/shared/package.json
+++ b/aio/tools/examples/shared/package.json
@@ -28,10 +28,11 @@
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
     "systemjs": "0.19.39",
+    "web-animations-js": "^2.3.1",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "^1.2.7",
+    "@angular/cli": "1.3.1",
     "@types/angular": "^1.5.16",
     "@types/angular-animate": "^1.5.5",
     "@types/angular-cookies": "^1.4.2",
@@ -39,20 +40,11 @@
     "@types/angular-resource": "^1.5.6",
     "@types/angular-route": "^1.3.2",
     "@types/angular-sanitize": "^1.3.3",
-    "@types/jasmine": "2.5.36",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "^2.0.3",
     "@types/node": "^6.0.45",
-    "angular2-template-loader": "^0.6.0",
-    "awesome-typescript-loader": "^3.0.4",
-    "babel-cli": "^6.16.0",
-    "babel-preset-angular2": "^0.0.2",
-    "babel-preset-es2015": "^6.16.0",
     "canonical-path": "0.0.2",
     "concurrently": "^3.0.0",
-    "css-loader": "^0.26.1",
-    "extract-text-webpack-plugin": "2.0.0-beta.5",
-    "file-loader": "^0.9.0",
-    "html-loader": "^0.4.3",
-    "html-webpack-plugin": "^2.16.1",
     "http-server": "^0.9.0",
     "jasmine": "~2.4.1",
     "jasmine-core": "~2.4.1",
@@ -63,26 +55,19 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-phantomjs-launcher": "^1.0.2",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.1",
     "lite-server": "^2.2.2",
     "lodash": "^4.16.2",
-    "null-loader": "^0.1.1",
     "phantomjs-prebuilt": "^2.1.7",
     "protractor": "~5.1.0",
-    "raw-loader": "^0.5.1",
     "rimraf": "^2.5.4",
     "rollup": "^0.41.6",
     "rollup-plugin-commonjs": "^8.0.2",
     "rollup-plugin-node-resolve": "2.0.0",
     "rollup-plugin-uglify": "^1.0.1",
     "source-map-explorer": "^1.3.2",
-    "style-loader": "^0.13.1",
     "ts-node": "~3.0.4",
     "tslint": "^3.15.1",
-    "typescript": "~2.3.2",
-    "webpack": "2.2.1",
-    "webpack-dev-server": "2.4.1",
-    "webpack-merge": "^3.0.0"
+    "typescript": "~2.3.2"
   },
   "repository": {}
 }
diff --git a/aio/tools/examples/shared/yarn.lock b/aio/tools/examples/shared/yarn.lock
index a443dc2a911..8492777f639 100644
--- a/aio/tools/examples/shared/yarn.lock
+++ b/aio/tools/examples/shared/yarn.lock
@@ -2,18 +2,27 @@
 # yarn lockfile v1
 
 
+"@angular-devkit/build-optimizer@0.0.13":
+  version "0.0.13"
+  resolved "https://registry.yarnpkg.com/@angular-devkit/build-optimizer/-/build-optimizer-0.0.13.tgz#cf397af76abe899aa909d4a735106694ca1f08cf"
+  dependencies:
+    loader-utils "^1.1.0"
+    source-map "^0.5.6"
+    typescript "^2.3.3"
+
 "@angular/animations@~4.3.1":
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/@angular/animations/-/animations-4.3.1.tgz#1f7e0bb803efc21c608246e6765a1c647f3d1a5f"
   dependencies:
     tslib "^1.7.1"
 
-"@angular/cli@^1.2.7":
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.2.7.tgz#dd20e8b0da24af5359077c05a6944823cb764132"
+"@angular/cli@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-1.3.1.tgz#2bc29fd709024dd397131b4cf1adc15026e6505f"
   dependencies:
+    "@angular-devkit/build-optimizer" "0.0.13"
     "@ngtools/json-schema" "1.1.0"
-    "@ngtools/webpack" "1.5.5"
+    "@ngtools/webpack" "1.6.1"
     autoprefixer "^6.5.3"
     chalk "^2.0.1"
     circular-dependency-plugin "^3.0.0"
@@ -26,22 +35,22 @@
     ember-cli-normalize-entity-name "^1.0.0"
     ember-cli-string-utils "^1.0.0"
     exports-loader "^0.6.3"
-    extract-text-webpack-plugin "^2.1.0"
+    extract-text-webpack-plugin "3.0.0"
     file-loader "^0.10.0"
     fs-extra "^4.0.0"
     get-caller-file "^1.0.0"
     glob "^7.0.3"
     heimdalljs "^0.2.4"
     heimdalljs-logger "^0.1.9"
-    html-webpack-plugin "^2.19.0"
+    html-webpack-plugin "^2.29.0"
     inflection "^1.7.0"
     inquirer "^3.0.0"
     isbinaryfile "^3.0.0"
     istanbul-instrumenter-loader "^2.0.0"
     karma-source-map-support "^1.2.0"
     less "^2.7.2"
-    less-loader "^4.0.2"
-    license-webpack-plugin "^0.4.2"
+    less-loader "^4.0.5"
+    license-webpack-plugin "^0.5.1"
     lodash "^4.11.1"
     memory-fs "^0.4.1"
     minimatch "^3.0.3"
@@ -54,7 +63,7 @@
     raw-loader "^0.5.1"
     resolve "^1.1.7"
     rsvp "^3.0.17"
-    rxjs "^5.0.1"
+    rxjs "^5.4.2"
     sass-loader "^6.0.3"
     script-loader "^0.7.0"
     semver "^5.1.0"
@@ -65,13 +74,13 @@
     stylus "^0.54.5"
     stylus-loader "^3.0.1"
     temp "0.8.3"
-    typescript ">=2.0.0 <2.4.0"
+    typescript ">=2.0.0 <2.5.0"
     url-loader "^0.5.7"
     walk-sync "^0.3.1"
-    webpack "~2.4.0"
-    webpack-dev-middleware "^1.10.2"
-    webpack-dev-server "~2.4.5"
-    webpack-merge "^2.4.0"
+    webpack "~3.4.1"
+    webpack-dev-middleware "^1.11.0"
+    webpack-dev-server "~2.5.1"
+    webpack-merge "^4.1.0"
     zone.js "^0.8.14"
   optionalDependencies:
     node-sass "^4.3.0"
@@ -156,9 +165,9 @@
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@ngtools/json-schema/-/json-schema-1.1.0.tgz#c3a0c544d62392acc2813a42c8a0dc6f58f86922"
 
-"@ngtools/webpack@1.5.5":
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.5.5.tgz#d6e2a933184015653de3be33d38437fdd81009e7"
+"@ngtools/webpack@1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-1.6.1.tgz#247fa77937a9df23a7cc499fee305bcb05745b18"
   dependencies:
     loader-utils "^1.0.2"
     magic-string "^0.22.3"
@@ -207,9 +216,15 @@
   dependencies:
     "@types/jquery" "*"
 
-"@types/jasmine@2.5.36":
-  version "2.5.36"
-  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.36.tgz#6d804b79a57e9380d766a2680e9362c17d9556d2"
+"@types/jasmine@*", "@types/jasmine@~2.5.53":
+  version "2.5.54"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.54.tgz#a6b5f2ae2afb6e0307774e8c7c608e037d491c63"
+
+"@types/jasminewd2@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/jasminewd2/-/jasminewd2-2.0.3.tgz#0d2886b0cbdae4c0eeba55e30792f584bf040a95"
+  dependencies:
+    "@types/jasmine" "*"
 
 "@types/jquery@*":
   version "2.0.46"
@@ -260,7 +275,7 @@ acorn@^3.0.4, acorn@^3.1.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
-acorn@^4.0.1, acorn@^4.0.3, acorn@^4.0.4:
+acorn@^4.0.1, acorn@^4.0.3:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
@@ -291,18 +306,18 @@ agent-base@2:
     extend "~3.0.0"
     semver "~5.0.1"
 
-ajv-keywords@^1.1.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.1.tgz#314dd0a4b3368fad3dfcdc54ede6171b886daf3c"
+ajv-keywords@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
 
-ajv@^4.7.0, ajv@^4.9.1:
+ajv@^4.9.1:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
   dependencies:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.0.0:
+ajv@^5.0.0, ajv@^5.1.5:
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.1.5.tgz#8734931b601f00d4feef7c65738d77d1b65d1f68"
   dependencies:
@@ -329,12 +344,6 @@ angular-in-memory-web-api@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/angular-in-memory-web-api/-/angular-in-memory-web-api-0.4.0.tgz#996715f37d8a4e659e154fedf76c4726470cb8d8"
 
-angular2-template-loader@^0.6.0:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/angular2-template-loader/-/angular2-template-loader-0.6.2.tgz#c0d44e90fff0fac95e8b23f043acda7fd1c51d7c"
-  dependencies:
-    loader-utils "^0.2.15"
-
 ansi-escapes@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
@@ -407,6 +416,10 @@ array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
 
+array-flatten@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.1.tgz#426bb9da84090c1838d812c8150af20a8331e296"
+
 array-slice@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-0.2.3.tgz#dd3cfb80ed7973a75117cdac69b0b99ec86186f5"
@@ -463,10 +476,6 @@ assert@^1.1.1:
   dependencies:
     util "0.10.3"
 
-ast-types@0.9.6:
-  version "0.9.6"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"
-
 async-each-series@0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/async-each-series/-/async-each-series-0.1.1.tgz#7617c1917401fd8ca4a28aadce3dbae98afeb432"
@@ -487,11 +496,11 @@ async@1.5.2, async@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^0.9.0, async@~0.9.0:
+async@^0.9.0:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
 
-async@^2.1.2, async@^2.1.5:
+async@^2.1.2, async@^2.1.5, async@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/async/-/async-2.4.1.tgz#62a56b279c98a11d0987096a01cc3eeb8eb7bbd7"
   dependencies:
@@ -516,18 +525,6 @@ autoprefixer@^6.3.1, autoprefixer@^6.5.3:
     postcss "^5.2.16"
     postcss-value-parser "^3.2.3"
 
-awesome-typescript-loader@^3.0.4:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/awesome-typescript-loader/-/awesome-typescript-loader-3.1.3.tgz#7eb41dfb136c2ea0e099bef038dc70c45f810223"
-  dependencies:
-    colors "^1.1.2"
-    enhanced-resolve "^3.1.0"
-    loader-utils "^1.1.0"
-    lodash "^4.17.4"
-    mkdirp "^0.5.1"
-    object-assign "^4.1.1"
-    source-map-support "^0.4.15"
-
 aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@@ -1105,6 +1102,17 @@ body-parser@^1.16.1:
     raw-body "~2.2.0"
     type-is "~1.6.15"
 
+bonjour@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
+  dependencies:
+    array-flatten "^2.1.0"
+    deep-equal "^1.0.1"
+    dns-equal "^1.0.0"
+    dns-txt "^2.0.2"
+    multicast-dns "^6.0.1"
+    multicast-dns-service-types "^1.1.0"
+
 boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -1280,6 +1288,10 @@ bubleify@^0.5.1:
     buble "^0.12.0"
     object-assign "^4.0.1"
 
+buffer-indexof@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
+
 buffer-xor@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
@@ -1338,6 +1350,10 @@ camelcase@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
 
+camelcase@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+
 caniuse-api@^1.5.2:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
@@ -1398,7 +1414,7 @@ chalk@^2.0.1:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
-chokidar@1.7.0, chokidar@^1.4.1, chokidar@^1.4.3, chokidar@^1.6.0, chokidar@^1.6.1:
+chokidar@1.7.0, chokidar@^1.4.1, chokidar@^1.6.0, chokidar@^1.6.1, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
   dependencies:
@@ -1753,6 +1769,14 @@ cross-spawn@^3.0.0:
     lru-cache "^4.0.1"
     which "^1.2.9"
 
+cross-spawn@^5.0.1:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
 cryptiles@2.x.x:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
@@ -1778,23 +1802,6 @@ css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
-css-loader@^0.26.1:
-  version "0.26.4"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.4.tgz#b61e9e30db94303e6ffc892f10ecd09ad025a1fd"
-  dependencies:
-    babel-code-frame "^6.11.0"
-    css-selector-tokenizer "^0.7.0"
-    cssnano ">=2.6.1 <4"
-    loader-utils "^1.0.2"
-    lodash.camelcase "^4.3.0"
-    object-assign "^4.0.1"
-    postcss "^5.0.6"
-    postcss-modules-extract-imports "^1.0.0"
-    postcss-modules-local-by-default "^1.0.1"
-    postcss-modules-scope "^1.0.0"
-    postcss-modules-values "^1.1.0"
-    source-list-map "^0.1.7"
-
 css-loader@^0.28.1:
   version "0.28.4"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.4.tgz#6cf3579192ce355e8b38d5f42dd7a1f2ec898d0f"
@@ -1897,6 +1904,12 @@ custom-event@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
 
+d@1:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+  dependencies:
+    es5-ext "^0.10.9"
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -1949,6 +1962,10 @@ decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
+deep-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+
 deep-extend@~0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
@@ -1969,6 +1986,17 @@ del@^2.2.0:
     pinkie-promise "^2.0.0"
     rimraf "^2.2.8"
 
+del@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
+  dependencies:
+    globby "^6.1.0"
+    is-path-cwd "^1.0.0"
+    is-path-in-cwd "^1.0.0"
+    p-map "^1.1.1"
+    pify "^3.0.0"
+    rimraf "^2.2.8"
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -2038,6 +2066,23 @@ directory-encoder@^0.7.2:
     handlebars "^1.3.0"
     img-stats "^0.5.2"
 
+dns-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
+
+dns-packet@^1.0.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.2.2.tgz#a8a26bec7646438963fc86e06f8f8b16d6c8bf7a"
+  dependencies:
+    ip "^1.1.0"
+    safe-buffer "^5.0.1"
+
+dns-txt@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
+  dependencies:
+    buffer-indexof "^1.0.0"
+
 docopt@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/docopt/-/docopt-0.6.2.tgz#b28e9e2220da5ec49f7ea5bb24a47787405eeb11"
@@ -2242,14 +2287,14 @@ engine.io@1.8.3:
     engine.io-parser "1.3.2"
     ws "1.1.2"
 
-enhanced-resolve@^3.0.0, enhanced-resolve@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.1.0.tgz#9f4b626f577245edcf4b2ad83d86e17f4f421dec"
+enhanced-resolve@^3.4.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz#0421e339fd71419b3da13d129b3979040230476e"
   dependencies:
     graceful-fs "^4.1.2"
     memory-fs "^0.4.0"
     object-assign "^4.0.1"
-    tapable "^0.2.5"
+    tapable "^0.2.7"
 
 ensure-posix-path@^1.0.0:
   version "1.0.2"
@@ -2275,16 +2320,61 @@ error-ex@^1.2.0:
   dependencies:
     is-arrayish "^0.2.1"
 
+es5-ext@^0.10.14, es5-ext@^0.10.9, es5-ext@~0.10.14:
+  version "0.10.30"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.30.tgz#7141a16836697dbabfaaaeee41495ce29f52c939"
+  dependencies:
+    es6-iterator "2"
+    es6-symbol "~3.1"
+
+es6-iterator@2, es6-iterator@^2.0.1, es6-iterator@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.1.tgz#8e319c9f0453bf575d374940a655920e59ca5512"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.14"
+    es6-symbol "^3.1"
+
+es6-map@^0.1.3:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.5.tgz#9136e0503dcc06a301690f0bb14ff4e364e949f0"
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+    es6-iterator "~2.0.1"
+    es6-set "~0.1.5"
+    es6-symbol "~3.1.1"
+    event-emitter "~0.3.5"
+
 es6-promise@~4.0.3:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.0.5.tgz#7882f30adde5b240ccfa7f7d78c548330951ae42"
 
-es6-templates@^0.2.2:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/es6-templates/-/es6-templates-0.2.3.tgz#5cb9ac9fb1ded6eb1239342b81d792bbb4078ee4"
+es6-set@~0.1.5:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
   dependencies:
-    recast "~0.11.12"
-    through "~2.3.6"
+    d "1"
+    es5-ext "~0.10.14"
+    es6-iterator "~2.0.1"
+    es6-symbol "3.1.1"
+    event-emitter "~0.3.5"
+
+es6-symbol@3.1.1, es6-symbol@^3.1, es6-symbol@^3.1.1, es6-symbol@~3.1, es6-symbol@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
+es6-weak-map@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
+  dependencies:
+    d "1"
+    es5-ext "^0.10.14"
+    es6-iterator "^2.0.1"
+    es6-symbol "^3.1.1"
 
 escape-html@~1.0.3:
   version "1.0.3"
@@ -2294,13 +2384,29 @@ escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2, escape-string-regexp@^
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
+escope@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/escope/-/escope-3.6.0.tgz#e01975e812781a163a6dadfdd80398dc64c889c3"
+  dependencies:
+    es6-map "^0.1.3"
+    es6-weak-map "^2.0.1"
+    esrecurse "^4.1.0"
+    estraverse "^4.1.1"
+
 esprima@^2.6.0:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
 
-esprima@~3.1.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+esrecurse@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.0.tgz#fa9568d98d3823f9a41d91e902dcab9ea6e5b163"
+  dependencies:
+    estraverse "^4.1.0"
+    object-assign "^4.0.1"
+
+estraverse@^4.1.0, estraverse@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
 estree-walker@^0.3.0:
   version "0.3.1"
@@ -2314,6 +2420,13 @@ etag@^1.7.0, etag@~1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.0.tgz#6f631aef336d6c46362b51764044ce216be3c051"
 
+event-emitter@~0.3.5:
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
+  dependencies:
+    d "1"
+    es5-ext "~0.10.14"
+
 eventemitter3@1.x.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
@@ -2334,6 +2447,18 @@ evp_bytestokey@^1.0.0:
   dependencies:
     create-hash "^1.1.1"
 
+execa@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
+  dependencies:
+    cross-spawn "^5.0.1"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -2432,20 +2557,12 @@ extglob@^0.3.1:
   dependencies:
     is-extglob "^1.0.0"
 
-extract-text-webpack-plugin@2.0.0-beta.5:
-  version "2.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.0.0-beta.5.tgz#595e32ae2466ad2129a928328485fcc064ce57f0"
+extract-text-webpack-plugin@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.0.tgz#90caa7907bc449f335005e3ac7532b41b00de612"
   dependencies:
-    async "^2.1.2"
-    loader-utils "^0.2.3"
-    webpack-sources "^0.1.0"
-
-extract-text-webpack-plugin@^2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-2.1.2.tgz#756ef4efa8155c3681833fbc34da53b941746d6c"
-  dependencies:
-    async "^2.1.2"
-    loader-utils "^1.0.2"
+    async "^2.4.1"
+    loader-utils "^1.1.0"
     schema-utils "^0.3.0"
     webpack-sources "^1.0.1"
 
@@ -2496,12 +2613,6 @@ file-loader@^0.10.0:
   dependencies:
     loader-utils "^1.0.2"
 
-file-loader@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.9.0.tgz#1d2daddd424ce6d1b07cfe3f79731bed3617ab42"
-  dependencies:
-    loader-utils "~0.2.5"
-
 file-url@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/file-url/-/file-url-1.1.0.tgz#a0f9cf3eb6904c9b1d3a6790b83a976fc40217bb"
@@ -2551,6 +2662,12 @@ find-up@^1.0.0:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
+find-up@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  dependencies:
+    locate-path "^2.0.0"
+
 findup-sync@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-0.3.0.tgz#37930aa5d816b777c03445e1966cc6790a4c0b16"
@@ -2715,6 +2832,10 @@ get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
 
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+
 getpass@^0.1.1:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
@@ -2788,6 +2909,16 @@ globby@^5.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globby@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  dependencies:
+    array-union "^1.0.1"
+    glob "^7.0.3"
+    object-assign "^4.0.1"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
 globule@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/globule/-/globule-1.1.0.tgz#c49352e4dc183d85893ee825385eb994bb6df45f"
@@ -2971,17 +3102,7 @@ html-entities@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
 
-html-loader@^0.4.3:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.4.5.tgz#5fbcd87cd63a5c49a7fce2fe56f425e05729c68c"
-  dependencies:
-    es6-templates "^0.2.2"
-    fastparse "^1.1.1"
-    html-minifier "^3.0.1"
-    loader-utils "^1.0.2"
-    object-assign "^4.1.0"
-
-html-minifier@^3.0.1, html-minifier@^3.2.3:
+html-minifier@^3.2.3:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.2.tgz#d73bc3ff448942408818ce609bf3fb0ea7ef4eb7"
   dependencies:
@@ -2994,9 +3115,9 @@ html-minifier@^3.0.1, html-minifier@^3.2.3:
     relateurl "0.2.x"
     uglify-js "3.0.x"
 
-html-webpack-plugin@^2.16.1, html-webpack-plugin@^2.19.0:
-  version "2.28.0"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.28.0.tgz#2e7863b57e5fd48fe263303e2ffc934c3064d009"
+html-webpack-plugin@^2.29.0:
+  version "2.30.1"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.30.1.tgz#7f9c421b7ea91ec460f56527d78df484ee7537d5"
   dependencies:
     bluebird "^3.4.7"
     html-minifier "^3.2.3"
@@ -3035,7 +3156,7 @@ http-errors@~1.6.1:
     setprototypeof "1.0.3"
     statuses ">= 1.3.1 < 2"
 
-http-proxy-middleware@~0.17.1, http-proxy-middleware@~0.17.4:
+http-proxy-middleware@~0.17.4:
   version "0.17.4"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
   dependencies:
@@ -3187,6 +3308,12 @@ inquirer@^3.0.0:
     strip-ansi "^3.0.0"
     through "^2.3.6"
 
+internal-ip@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
+  dependencies:
+    meow "^3.3.0"
+
 interpret@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
@@ -3201,6 +3328,10 @@ invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
 
+ip@^1.1.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
+
 ipaddr.js@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.3.0.tgz#1e03a52fdad83a8bbb2b25cbf4998b4cffcd3dec"
@@ -3351,7 +3482,7 @@ is-property@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
 
-is-stream@^1.0.1:
+is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
@@ -3584,16 +3715,6 @@ karma-sourcemap-loader@^0.3.7:
   dependencies:
     graceful-fs "^4.1.2"
 
-karma-webpack@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/karma-webpack/-/karma-webpack-2.0.3.tgz#39cebf5ca2580139b27f9ae69b78816b9c82fae6"
-  dependencies:
-    async "~0.9.0"
-    loader-utils "^0.2.5"
-    lodash "^3.8.0"
-    source-map "^0.1.41"
-    webpack-dev-middleware "^1.0.11"
-
 karma@^1.3.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/karma/-/karma-1.7.0.tgz#6f7a1a406446fa2e187ec95398698f4cee476269"
@@ -3662,9 +3783,9 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-less-loader@^4.0.2:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.0.4.tgz#b4a8c43843e65c67d2ea2eb1465b5c4233d5006a"
+less-loader@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/less-loader/-/less-loader-4.0.5.tgz#ae155a7406cac6acd293d785587fcff0f478c4dd"
   dependencies:
     clone "^2.1.1"
     loader-utils "^1.1.0"
@@ -3683,9 +3804,9 @@ less@^2.7.2:
     request "^2.72.0"
     source-map "^0.5.3"
 
-license-webpack-plugin@^0.4.2:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-0.4.3.tgz#f9d88d4ebc04407a0061e8ccac26571f88e51a16"
+license-webpack-plugin@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/license-webpack-plugin/-/license-webpack-plugin-0.5.1.tgz#68d8af103486a9c4ebceddb7ed5d3bd61f383be4"
   dependencies:
     object-assign "^4.1.0"
 
@@ -3713,11 +3834,20 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
+load-json-file@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^2.2.0"
+    pify "^2.0.0"
+    strip-bom "^3.0.0"
+
 loader-runner@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
 
-loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.5, loader-utils@~0.2.2, loader-utils@~0.2.5:
+loader-utils@^0.2.16, loader-utils@~0.2.2:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
   dependencies:
@@ -3743,6 +3873,13 @@ localtunnel@1.8.2:
     request "2.78.0"
     yargs "3.29.0"
 
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
 lodash.assign@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
@@ -3870,6 +4007,12 @@ media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
 
+mem@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
+  dependencies:
+    mimic-fn "^1.0.0"
+
 memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -3877,7 +4020,7 @@ memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
-meow@^3.7.0:
+meow@^3.3.0, meow@^3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
   dependencies:
@@ -4027,6 +4170,17 @@ ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
 
+multicast-dns-service-types@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
+
+multicast-dns@^6.0.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.1.1.tgz#6e7de86a570872ab17058adea7160bbeca814dde"
+  dependencies:
+    dns-packet "^1.0.1"
+    thunky "^0.1.0"
+
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
@@ -4051,6 +4205,10 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+node-forge@0.6.33:
+  version "0.6.33"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.6.33.tgz#463811879f573d45155ad6a9f43dc296e8e85ebc"
+
 node-gyp@^3.3.1:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.6.2.tgz#9bfbe54562286284838e750eac05295853fa1c60"
@@ -4183,6 +4341,12 @@ normalize-url@^1.4.0:
     query-string "^4.1.0"
     sort-keys "^1.0.0"
 
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  dependencies:
+    path-key "^2.0.0"
+
 "npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.0.tgz#dc59bee85f64f00ed424efb2af0783df25d1c0b5"
@@ -4202,10 +4366,6 @@ null-check@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/null-check/-/null-check-1.0.0.tgz#977dffd7176012b9ec30d2a39db5cf72a0439edd"
 
-null-loader@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/null-loader/-/null-loader-0.1.1.tgz#17be9abfcd3ff0e1512f6fc4afcb1f5039378fae"
-
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
@@ -4329,6 +4489,14 @@ os-locale@^1.4.0:
   dependencies:
     lcid "^1.0.0"
 
+os-locale@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
+  dependencies:
+    execa "^0.7.0"
+    lcid "^1.0.0"
+    mem "^1.1.0"
+
 os-tmpdir@^1.0.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
@@ -4348,6 +4516,24 @@ output-file-sync@^1.1.0:
     mkdirp "^0.5.1"
     object-assign "^4.1.0"
 
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+
+p-limit@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
+
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  dependencies:
+    p-limit "^1.1.0"
+
+p-map@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.1.1.tgz#05f5e4ae97a068371bc2a5cc86bfbdbc19c4ae7a"
+
 pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
@@ -4421,6 +4607,10 @@ path-exists@^2.0.0:
   dependencies:
     pinkie-promise "^2.0.0"
 
+path-exists@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -4429,6 +4619,10 @@ path-is-inside@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
 
+path-key@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+
 path-parse@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
@@ -4445,6 +4639,12 @@ path-type@^1.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+path-type@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
+  dependencies:
+    pify "^2.0.0"
+
 pbkdf2@^3.0.3:
   version "3.0.12"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.12.tgz#be36785c5067ea48d806ff923288c5f750b6b8a2"
@@ -4481,6 +4681,10 @@ pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
@@ -4818,7 +5022,7 @@ pretty-error@^2.0.2:
     renderkid "^2.0.1"
     utila "~0.4"
 
-private@^0.1.6, private@~0.1.5:
+private@^0.1.6:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"
 
@@ -4989,6 +5193,13 @@ read-pkg-up@^1.0.1:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
 
+read-pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^2.0.0"
+
 read-pkg@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
@@ -4997,6 +5208,14 @@ read-pkg@^1.0.0:
     normalize-package-data "^2.3.2"
     path-type "^1.0.0"
 
+read-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+  dependencies:
+    load-json-file "^2.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^2.0.0"
+
 readable-stream@1.0, readable-stream@~1.0.2:
   version "1.0.34"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
@@ -5038,15 +5257,6 @@ readdirp@^2.0.0:
     readable-stream "^2.0.2"
     set-immediate-shim "^1.0.1"
 
-recast@~0.11.12:
-  version "0.11.23"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
-  dependencies:
-    ast-types "0.9.6"
-    esprima "~3.1.0"
-    private "~0.1.5"
-    source-map "~0.5.0"
-
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
@@ -5372,12 +5582,18 @@ rx@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
 
-rxjs@^5.0.1, rxjs@^5.1.0:
+rxjs@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.1.0.tgz#0aa9018b7f440b505fa42bd742b6738be550e720"
   dependencies:
     symbol-observable "^1.0.1"
 
+rxjs@^5.4.2:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.4.3.tgz#0758cddee6033d68e0fd53676f0f3596ce3d483f"
+  dependencies:
+    symbol-observable "^1.0.1"
+
 safe-buffer@^5.0.1, safe-buffer@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.0.tgz#fe4c8460397f9eaaaa58e73be46273408a45e223"
@@ -5465,6 +5681,12 @@ selenium-webdriver@^2.53.2:
     ws "^1.0.1"
     xml2js "0.4.4"
 
+selfsigned@^1.9.1:
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.1.tgz#bf8cb7b83256c4551e31347c6311778db99eec52"
+  dependencies:
+    node-forge "0.6.33"
+
 "semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@@ -5594,6 +5816,16 @@ shallow-clone@^0.1.2:
     lazy-cache "^0.2.3"
     mixin-object "^2.0.1"
 
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+
 sigmund@~1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
@@ -5714,14 +5946,10 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-source-list-map@^0.1.7, source-list-map@~0.1.7:
+source-list-map@^0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-0.1.8.tgz#c550b2ab5427f6b3f21f5afead88c4f5587b2106"
 
-source-list-map@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-1.1.2.tgz#9889019d1024cce55cdc069498337ef6186a11a1"
-
 source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
@@ -5747,19 +5975,19 @@ source-map-loader@^0.2.0:
     loader-utils "~0.2.2"
     source-map "~0.1.33"
 
-source-map-support@^0.4.0, source-map-support@^0.4.1, source-map-support@^0.4.15, source-map-support@^0.4.2, source-map-support@~0.4.0:
+source-map-support@^0.4.0, source-map-support@^0.4.1, source-map-support@^0.4.2, source-map-support@~0.4.0:
   version "0.4.15"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.15.tgz#03202df65c06d2bd8c7ec2362a193056fef8d3b1"
   dependencies:
     source-map "^0.5.6"
 
-source-map@0.1.x, source-map@^0.1.41, source-map@~0.1.33, source-map@~0.1.7:
+source-map@0.1.x, source-map@~0.1.33, source-map@~0.1.7:
   version "0.1.43"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
+source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
 
@@ -5921,6 +6149,10 @@ strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
 
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+
 strip-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
@@ -5964,13 +6196,13 @@ supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
-supports-color@^3.1.0, supports-color@^3.1.1, supports-color@^3.2.3:
+supports-color@^3.1.1, supports-color@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
   dependencies:
     has-flag "^1.0.0"
 
-supports-color@^4.0.0:
+supports-color@^4.0.0, supports-color@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.2.1.tgz#65a4bb2631e90e02420dba5554c375a4754bb836"
   dependencies:
@@ -5998,9 +6230,9 @@ systemjs@0.19.39:
   dependencies:
     when "^3.7.5"
 
-tapable@^0.2.5, tapable@~0.2.5:
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.6.tgz#206be8e188860b514425375e6f1ae89bfb01fd8d"
+tapable@^0.2.7:
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"
 
 tar-pack@^3.4.0:
   version "3.4.0"
@@ -6041,10 +6273,18 @@ throttleit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
 
-through@^2.3.6, through@~2.3.6:
+through@^2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
 
+thunky@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/thunky/-/thunky-0.1.0.tgz#bf30146824e2b6e67b0f2d7a4ac8beb26908684e"
+
+time-stamp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.0.0.tgz#95c6a44530e15ba8d6f4a3ecb8c3a3fac46da357"
+
 timers-browserify@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.2.tgz#ab4883cf597dcd50af211349a00fbca56ac86b86"
@@ -6177,7 +6417,7 @@ typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-"typescript@>=2.0.0 <2.4.0", typescript@~2.3.2:
+"typescript@>=2.0.0 <2.5.0", typescript@^2.3.3, typescript@~2.3.2:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.4.tgz#3d38321828231e434f287514959c37a82b629f42"
 
@@ -6192,7 +6432,7 @@ uglify-js@3.0.x:
     commander "~2.9.0"
     source-map "~0.5.1"
 
-uglify-js@^2.6.1, uglify-js@^2.7.5, uglify-js@^2.8.5:
+uglify-js@^2.6.1:
   version "2.8.28"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.28.tgz#e335032df9bb20dcb918f164589d5af47f38834a"
   dependencies:
@@ -6201,6 +6441,15 @@ uglify-js@^2.6.1, uglify-js@^2.7.5, uglify-js@^2.8.5:
   optionalDependencies:
     uglify-to-browserify "~1.0.0"
 
+uglify-js@^2.8.29:
+  version "2.8.29"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  dependencies:
+    source-map "~0.5.1"
+    yargs "~3.10.0"
+  optionalDependencies:
+    uglify-to-browserify "~1.0.0"
+
 uglify-js@~2.3:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.3.6.tgz#fa0984770b428b7a9b2a8058f46355d14fef211a"
@@ -6213,6 +6462,14 @@ uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
 
+uglifyjs-webpack-plugin@^0.4.6:
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz#b951f4abb6bd617e66f63eb891498e391763e309"
+  dependencies:
+    source-map "^0.5.6"
+    uglify-js "^2.8.29"
+    webpack-sources "^1.0.1"
+
 uid-number@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
@@ -6389,12 +6646,12 @@ walk-sync@^0.3.1:
     ensure-posix-path "^1.0.0"
     matcher-collection "^1.0.0"
 
-watchpack@^1.2.0, watchpack@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.3.1.tgz#7d8693907b28ce6013e7f3610aa2a1acf07dad87"
+watchpack@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"
   dependencies:
     async "^2.1.2"
-    chokidar "^1.4.3"
+    chokidar "^1.7.0"
     graceful-fs "^4.1.2"
 
 wbuf@^1.1.0, wbuf@^1.7.2:
@@ -6403,6 +6660,10 @@ wbuf@^1.1.0, wbuf@^1.7.2:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+web-animations-js@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/web-animations-js/-/web-animations-js-2.3.1.tgz#3a6d9bc15196377a90f8e2803fa5262165b04510"
+
 webdriver-js-extender@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/webdriver-js-extender/-/webdriver-js-extender-1.0.0.tgz#81c533a9e33d5bfb597b4e63e2cdb25b54777515"
@@ -6426,85 +6687,48 @@ webdriver-manager@^12.0.6:
     semver "^5.3.0"
     xml2js "^0.4.17"
 
-webpack-dev-middleware@^1.0.11, webpack-dev-middleware@^1.10.2, webpack-dev-middleware@^1.9.0:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.2.tgz#2e252ce1dfb020dbda1ccb37df26f30ab014dbd1"
+webpack-dev-middleware@^1.11.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.0.tgz#d34efefb2edda7e1d3b5dbe07289513219651709"
   dependencies:
     memory-fs "~0.4.1"
     mime "^1.3.4"
     path-is-absolute "^1.0.0"
     range-parser "^1.0.3"
+    time-stamp "^2.0.0"
 
-webpack-dev-server@2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.4.1.tgz#48556f793186eac0758df94730c034ed9a4d0f12"
-  dependencies:
-    ansi-html "0.0.7"
-    chokidar "^1.6.0"
-    compression "^1.5.2"
-    connect-history-api-fallback "^1.3.0"
-    express "^4.13.3"
-    html-entities "^1.2.0"
-    http-proxy-middleware "~0.17.1"
-    opn "4.0.2"
-    portfinder "^1.0.9"
-    serve-index "^1.7.2"
-    sockjs "0.3.18"
-    sockjs-client "1.1.2"
-    spdy "^3.4.1"
-    strip-ansi "^3.0.0"
-    supports-color "^3.1.1"
-    webpack-dev-middleware "^1.9.0"
-    yargs "^6.0.0"
-
-webpack-dev-server@~2.4.5:
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.4.5.tgz#31384ce81136be1080b4b4cde0eb9b90e54ee6cf"
+webpack-dev-server@~2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.5.1.tgz#a02e726a87bb603db5d71abb7d6d2649bf10c769"
   dependencies:
     ansi-html "0.0.7"
+    bonjour "^3.5.0"
     chokidar "^1.6.0"
     compression "^1.5.2"
     connect-history-api-fallback "^1.3.0"
+    del "^3.0.0"
     express "^4.13.3"
     html-entities "^1.2.0"
     http-proxy-middleware "~0.17.4"
+    internal-ip "^1.2.0"
     opn "4.0.2"
     portfinder "^1.0.9"
+    selfsigned "^1.9.1"
     serve-index "^1.7.2"
     sockjs "0.3.18"
     sockjs-client "1.1.2"
     spdy "^3.4.1"
     strip-ansi "^3.0.0"
     supports-color "^3.1.1"
-    webpack-dev-middleware "^1.10.2"
+    webpack-dev-middleware "^1.11.0"
     yargs "^6.0.0"
 
-webpack-merge@^2.4.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-2.6.1.tgz#f1d801d2c5d39f83ffec9f119240b3e3be994a1c"
+webpack-merge@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.0.tgz#6ad72223b3e0b837e531e4597c199f909361511e"
   dependencies:
     lodash "^4.17.4"
 
-webpack-merge@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-3.0.0.tgz#f2c9c28691bc44fdb124745cb84a8fab74125701"
-  dependencies:
-    lodash "^4.17.4"
-
-webpack-sources@^0.1.0, webpack-sources@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.1.5.tgz#aa1f3abf0f0d74db7111c40e500b84f966640750"
-  dependencies:
-    source-list-map "~0.1.7"
-    source-map "~0.5.3"
-
-webpack-sources@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.2.3.tgz#17c62bfaf13c707f9d02c479e0dcdde8380697fb"
-  dependencies:
-    source-list-map "^1.1.1"
-    source-map "~0.5.3"
-
 webpack-sources@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"
@@ -6512,56 +6736,32 @@ webpack-sources@^1.0.1:
     source-list-map "^2.0.0"
     source-map "~0.5.3"
 
-webpack@2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.2.1.tgz#7bb1d72ae2087dd1a4af526afec15eed17dda475"
-  dependencies:
-    acorn "^4.0.4"
-    acorn-dynamic-import "^2.0.0"
-    ajv "^4.7.0"
-    ajv-keywords "^1.1.1"
-    async "^2.1.2"
-    enhanced-resolve "^3.0.0"
-    interpret "^1.0.0"
-    json-loader "^0.5.4"
-    loader-runner "^2.3.0"
-    loader-utils "^0.2.16"
-    memory-fs "~0.4.1"
-    mkdirp "~0.5.0"
-    node-libs-browser "^2.0.0"
-    source-map "^0.5.3"
-    supports-color "^3.1.0"
-    tapable "~0.2.5"
-    uglify-js "^2.7.5"
-    watchpack "^1.2.0"
-    webpack-sources "^0.1.4"
-    yargs "^6.0.0"
-
-webpack@~2.4.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-2.4.1.tgz#15a91dbe34966d8a4b99c7d656efd92a2e5a6f6a"
+webpack@~3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.4.1.tgz#4c3f4f3fb318155a4db0cb6a36ff05c5697418f4"
   dependencies:
     acorn "^5.0.0"
     acorn-dynamic-import "^2.0.0"
-    ajv "^4.7.0"
-    ajv-keywords "^1.1.1"
+    ajv "^5.1.5"
+    ajv-keywords "^2.0.0"
     async "^2.1.2"
-    enhanced-resolve "^3.0.0"
+    enhanced-resolve "^3.4.0"
+    escope "^3.6.0"
     interpret "^1.0.0"
     json-loader "^0.5.4"
     json5 "^0.5.1"
     loader-runner "^2.3.0"
-    loader-utils "^0.2.16"
+    loader-utils "^1.1.0"
     memory-fs "~0.4.1"
     mkdirp "~0.5.0"
     node-libs-browser "^2.0.0"
     source-map "^0.5.3"
-    supports-color "^3.1.0"
-    tapable "~0.2.5"
-    uglify-js "^2.8.5"
-    watchpack "^1.3.1"
-    webpack-sources "^0.2.3"
-    yargs "^6.0.0"
+    supports-color "^4.2.1"
+    tapable "^0.2.7"
+    uglifyjs-webpack-plugin "^0.4.6"
+    watchpack "^1.4.0"
+    webpack-sources "^1.0.1"
+    yargs "^8.0.2"
 
 websocket-driver@>=0.5.1:
   version "0.6.5"
@@ -6597,6 +6797,10 @@ which-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
 
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+
 which@1, which@^1.2.1, which@^1.2.9, which@~1.2.10:
   version "1.2.14"
   resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
@@ -6718,6 +6922,12 @@ yargs-parser@^5.0.0:
   dependencies:
     camelcase "^3.0.0"
 
+yargs-parser@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"
+  dependencies:
+    camelcase "^4.1.0"
+
 yargs@3.29.0:
   version "3.29.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.29.0.tgz#1aab9660eae79d8b8f675bcaeeab6ee34c2cf69c"
@@ -6784,6 +6994,24 @@ yargs@^7.0.0:
     y18n "^3.2.1"
     yargs-parser "^5.0.0"
 
+yargs@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
+  dependencies:
+    camelcase "^4.1.0"
+    cliui "^3.2.0"
+    decamelize "^1.1.1"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    read-pkg-up "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^7.0.0"
+
 yargs@~3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
diff --git a/aio/tools/plunker-builder/builder.js b/aio/tools/plunker-builder/builder.js
index a461bfd9ae2..fbcc8a5a42f 100644
--- a/aio/tools/plunker-builder/builder.js
+++ b/aio/tools/plunker-builder/builder.js
@@ -11,6 +11,7 @@ var globby = require('globby');
 var fileTranslator = require('./translator/fileTranslator');
 var indexHtmlRules = require('./translator/rules/indexHtml');
 var systemjsConfigExtrasRules = require('./translator/rules/systemjsConfigExtras');
+var mainTsRules = require('./translator/rules/mainTs');
 var regionExtractor = require('../transforms/examples-package/services/region-parser');
 
 class PlunkerBuilder {
@@ -18,7 +19,7 @@ class PlunkerBuilder {
     this.basePath = basePath;
     this.destPath = destPath;
     this.options = options;
-    this.boilerplate = path.join(__dirname, '../examples/shared/boilerplate');
+    this.boilerplate = path.join(__dirname, '../examples/shared/boilerplate/systemjs');
     this.copyrights = {};
 
     this._buildCopyrightStrings();
@@ -148,6 +149,11 @@ class PlunkerBuilder {
         }
       }
 
+      // Matches main.ts or main.1.ts
+      if (/^main(?:[.-]\w+)?\.ts$/.test(relativeFileName)) {
+        content = fileTranslator.translate(content, mainTsRules);
+      }
+
       if (relativeFileName == 'systemjs.config.extras.js') {
         content = fileTranslator.translate(content, systemjsConfigExtrasRules);
       }
@@ -288,6 +294,10 @@ class PlunkerBuilder {
       '!**/wallaby.js',
       '!**/karma-test-shim.js',
       '!**/karma.conf.js',
+      '!**/test.ts',
+      '!**/polyfills.ts',
+      '!**/tsconfig.app.json',
+      '!**/environments/**',
       // AoT related files
       '!**/aot/**/*.*',
       '!**/*-aot.*'
diff --git a/aio/tools/plunker-builder/translator/fileTranslator.js b/aio/tools/plunker-builder/translator/fileTranslator.js
index 8a97ad2c532..6f45476333d 100644
--- a/aio/tools/plunker-builder/translator/fileTranslator.js
+++ b/aio/tools/plunker-builder/translator/fileTranslator.js
@@ -5,6 +5,10 @@ function translate(html, rulesFile) {
     var rxRule = rulesFile.rules[rxDatum.pattern];
     // rxFrom is a rexexp
     var rxFrom = rxRule.from;
+    // check if there is an exception
+    if (rxDatum.exceptIf) {
+      if (html.indexOf(rxDatum.exceptIf) !== -1) return;
+    }
     if (rxDatum.from) {
       var from = rxDatum.from.replace('/', '\/');
       var rxTemp = rxFrom.toString();
diff --git a/aio/tools/plunker-builder/translator/rules/indexHtml.js b/aio/tools/plunker-builder/translator/rules/indexHtml.js
index 68263885d1c..ecfdd6d8710 100644
--- a/aio/tools/plunker-builder/translator/rules/indexHtml.js
+++ b/aio/tools/plunker-builder/translator/rules/indexHtml.js
@@ -35,9 +35,27 @@ var rules = {
     from: /src=".?node_modules\/zone.js\/dist\/(.*)"/g,
     to:   'src="https://unpkg.com/zone.js/dist/$1?main=browser"'
   },
+  system_js_header: {
+    from: '</head>',
+    to: `
+    <link rel="stylesheet" href="styles.css">
+    <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>
+    `
+  }
 };
 
 var rulesToApply = [
+  {
+    pattern: 'system_js_header',
+    exceptIf: 'system.src.js'
+  },
   {
     pattern: 'basehref',
   },
diff --git a/aio/tools/plunker-builder/translator/rules/mainTs.js b/aio/tools/plunker-builder/translator/rules/mainTs.js
new file mode 100644
index 00000000000..24b31851f16
--- /dev/null
+++ b/aio/tools/plunker-builder/translator/rules/mainTs.js
@@ -0,0 +1,24 @@
+var rules = {
+  environment_import: {
+    from: `import { environment } from './environments/environment';`,
+    to: ''
+  },
+  environment_check: {
+    from: /if \(environment\.production\)\s*{\n*\s*enableProdMode\(\);\s*}/g,
+    to: ''
+  }
+};
+
+var rulesToApply = [
+  {
+    pattern: 'environment_import'
+  },
+  {
+    pattern: 'environment_check'
+  }
+];
+
+module.exports = {
+  rules: rules,
+  rulesToApply: rulesToApply
+};