diff --git a/gulpfile.js b/gulpfile.js
index a30abd0fc7..82583e76bb 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -86,6 +86,7 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
 var _exampleBoilerplateFiles = [
   'src/styles.css',
   'src/systemjs.config.js',
+  'src/systemjs-angular-loader.js',
   'src/tsconfig.json',
   'bs-config.json',
   'bs-config.e2e.json',
diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore
index eedd04da43..3fb5ae8562 100644
--- a/public/docs/_examples/.gitignore
+++ b/public/docs/_examples/.gitignore
@@ -1,6 +1,7 @@
 # _boilerplate files
 !_boilerplate/*
 */*/src/styles.css
+*/*/src/systemjs-angular-loader.js
 */*/src/systemjs.config.js
 */*/src/tsconfig.json
 */*/bs-config.e2e.json
diff --git a/public/docs/_examples/_boilerplate/src/systemjs-angular-loader.js b/public/docs/_examples/_boilerplate/src/systemjs-angular-loader.js
new file mode 100644
index 0000000000..5aa9a31411
--- /dev/null
+++ b/public/docs/_examples/_boilerplate/src/systemjs-angular-loader.js
@@ -0,0 +1,43 @@
+var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
+var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
+var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
+
+module.exports.translate = function(load){
+
+  var url = new URL(load.address);
+
+  var basePathParts = url.pathname.split('/');
+
+  if (url.href.indexOf('plnkr') != -1) {
+    basePathParts.shift();
+    basePathParts.shift();
+  }
+
+  basePathParts.pop();
+  var basePath = basePathParts.join('/');
+  load.source = load.source
+    .replace(templateUrlRegex, function(match, quote, url){
+      let resolvedUrl = url;
+
+      if (url.startsWith('.')) {
+        resolvedUrl = basePath + url.substr(1);
+      }
+
+      return `templateUrl: '${resolvedUrl}'`;
+    })
+    .replace(stylesRegex, function(match, relativeUrls) {
+      var urls = [];
+
+      while ((match = stringRegex.exec(relativeUrls)) !== null) {
+        if (match[2].startsWith('.')) {
+          urls.push(`'${basePath.substr(1)}${match[2].substr(1)}'`);
+        } else {
+          urls.push(`'${match[2]}'`);
+        }
+      }
+
+      return "styleUrls: [" + urls.join(', ') + "]";
+    });
+
+  return load;
+};
diff --git a/public/docs/_examples/_boilerplate/src/systemjs.config.js b/public/docs/_examples/_boilerplate/src/systemjs.config.js
index 5fa7e9c24f..9c2883b953 100644
--- a/public/docs/_examples/_boilerplate/src/systemjs.config.js
+++ b/public/docs/_examples/_boilerplate/src/systemjs.config.js
@@ -11,7 +11,7 @@
     // map tells the System loader where to look for things
     map: {
       // our app is within the app folder
-      app: 'app',
+      'app': 'app',
 
       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
@@ -32,7 +32,12 @@
     packages: {
       app: {
         main: './main.js',
-        defaultExtension: 'js'
+        defaultExtension: 'js',
+        meta: {
+          './*.js': {
+            loader: 'systemjs-angular-loader.js'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'
diff --git a/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js b/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js
index c27642ce02..35fd6ed6ad 100644
--- a/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js
+++ b/public/docs/_examples/_boilerplate/src/systemjs.config.web.build.js
@@ -34,8 +34,9 @@
     },
     // map tells the System loader where to look for things
     map: {
+      'ng-loader': './systemjs-angular-loader.js',
       // our app is within the app folder
-      app: 'app',
+      'app': 'app',
 
       // angular bundles
       '@angular/core': 'ng:core-builds/master/bundles/core.umd.js',
@@ -71,7 +72,12 @@
     packages: {
       app: {
         main: './main.ts',
-        defaultExtension: 'ts'
+        defaultExtension: 'ts',
+        meta: {
+          './*.ts': {
+            loader: 'ng-loader'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'
diff --git a/public/docs/_examples/_boilerplate/src/systemjs.config.web.js b/public/docs/_examples/_boilerplate/src/systemjs.config.web.js
index dc0234a172..91cfc03627 100644
--- a/public/docs/_examples/_boilerplate/src/systemjs.config.web.js
+++ b/public/docs/_examples/_boilerplate/src/systemjs.config.web.js
@@ -31,8 +31,9 @@
     },
     // map tells the System loader where to look for things
     map: {
+      'ng-loader': './systemjs-angular-loader.js',
       // our app is within the app folder
-      app: 'app',
+      'app': 'app',
 
       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
@@ -58,7 +59,12 @@
     packages: {
       app: {
         main: './main.ts',
-        defaultExtension: 'ts'
+        defaultExtension: 'ts',
+        meta: {
+          './*.ts': {
+            loader: 'ng-loader'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'
diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts
index df7280d3ea..060417e309 100644
--- a/public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts
+++ b/public/docs/_examples/animations/ts/src/app/hero-list-auto.component.ts
@@ -11,7 +11,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-auto',
   // #docregion template
   template: `
diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-basic.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-basic.component.ts
index a40f9ade94..d70a40a4ac 100644
--- a/public/docs/_examples/animations/ts/src/app/hero-list-basic.component.ts
+++ b/public/docs/_examples/animations/ts/src/app/hero-list-basic.component.ts
@@ -15,7 +15,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-basic',
   // #enddocregion
   /* The click event calls hero.toggleState(), which
diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-combined-transitions.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-combined-transitions.component.ts
index b40a0c3514..3847af40c4 100644
--- a/public/docs/_examples/animations/ts/src/app/hero-list-combined-transitions.component.ts
+++ b/public/docs/_examples/animations/ts/src/app/hero-list-combined-transitions.component.ts
@@ -14,7 +14,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
- moduleId: module.id,
  selector: 'hero-list-combined-transitions',
  // #docregion template
  template: `
diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts
index a88e08f251..2a19b7615b 100644
--- a/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts
+++ b/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave-states.component.ts
@@ -11,7 +11,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-enter-leave-states',
   // #docregion template
   template: `
diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave.component.ts
index 05944c84f1..0b38ee55e4 100644
--- a/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave.component.ts
+++ b/public/docs/_examples/animations/ts/src/app/hero-list-enter-leave.component.ts
@@ -11,7 +11,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-enter-leave',
   // #docregion template
   template: `
diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-groups.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-groups.component.ts
index dda696eca2..a9583994fc 100644
--- a/public/docs/_examples/animations/ts/src/app/hero-list-groups.component.ts
+++ b/public/docs/_examples/animations/ts/src/app/hero-list-groups.component.ts
@@ -12,7 +12,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-groups',
   template: `
     <ul>
diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-inline-styles.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-inline-styles.component.ts
index 19e6fb8cce..356c8323ea 100644
--- a/public/docs/_examples/animations/ts/src/app/hero-list-inline-styles.component.ts
+++ b/public/docs/_examples/animations/ts/src/app/hero-list-inline-styles.component.ts
@@ -13,7 +13,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
- moduleId: module.id,
  selector: 'hero-list-inline-styles',
  // #docregion template
  template: `
diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-multistep.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-multistep.component.ts
index 25c10cc533..25353ca359 100644
--- a/public/docs/_examples/animations/ts/src/app/hero-list-multistep.component.ts
+++ b/public/docs/_examples/animations/ts/src/app/hero-list-multistep.component.ts
@@ -13,7 +13,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-multistep',
   // #docregion template
   template: `
diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-timings.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-timings.component.ts
index eed6f90004..3dd96e5802 100644
--- a/public/docs/_examples/animations/ts/src/app/hero-list-timings.component.ts
+++ b/public/docs/_examples/animations/ts/src/app/hero-list-timings.component.ts
@@ -11,7 +11,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list-timings',
   template: `
     <ul>
diff --git a/public/docs/_examples/animations/ts/src/app/hero-list-twoway.component.ts b/public/docs/_examples/animations/ts/src/app/hero-list-twoway.component.ts
index c9ec43f904..edb8aa1ae6 100644
--- a/public/docs/_examples/animations/ts/src/app/hero-list-twoway.component.ts
+++ b/public/docs/_examples/animations/ts/src/app/hero-list-twoway.component.ts
@@ -14,7 +14,6 @@ import {
 import { Heroes } from './hero.service';
 
 @Component({
- moduleId: module.id,
  selector: 'hero-list-twoway',
  // #docregion template
  template: `
diff --git a/public/docs/_examples/architecture/ts/src/app/hero-detail.component.ts b/public/docs/_examples/architecture/ts/src/app/hero-detail.component.ts
index 44a702ad49..b75d6dd225 100644
--- a/public/docs/_examples/architecture/ts/src/app/hero-detail.component.ts
+++ b/public/docs/_examples/architecture/ts/src/app/hero-detail.component.ts
@@ -3,7 +3,6 @@ import { Component, Input } from '@angular/core';
 import { Hero } from './hero';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail',
   templateUrl: './hero-detail.component.html'
 })
diff --git a/public/docs/_examples/architecture/ts/src/app/hero-list.component.ts b/public/docs/_examples/architecture/ts/src/app/hero-list.component.ts
index f72f57eef4..a3d372f00b 100644
--- a/public/docs/_examples/architecture/ts/src/app/hero-list.component.ts
+++ b/public/docs/_examples/architecture/ts/src/app/hero-list.component.ts
@@ -5,7 +5,6 @@ import { HeroService }         from './hero.service';
 
 // #docregion metadata, providers
 @Component({
-  moduleId: module.id,
   selector:    'hero-list',
   templateUrl: './hero-list.component.html',
   providers:  [ HeroService ]
diff --git a/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.ts b/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.ts
index d65cb57850..7a43c41b1a 100644
--- a/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.ts
+++ b/public/docs/_examples/attribute-directives/ts/src/app/app.component.1.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.1.html'
 })
diff --git a/public/docs/_examples/attribute-directives/ts/src/app/app.component.ts b/public/docs/_examples/attribute-directives/ts/src/app/app.component.ts
index a88e8e49a3..99221549da 100644
--- a/public/docs/_examples/attribute-directives/ts/src/app/app.component.ts
+++ b/public/docs/_examples/attribute-directives/ts/src/app/app.component.ts
@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.ts
index 4d708509a1..e1b71e37dc 100644
--- a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.ts
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/app.component.ts
@@ -4,7 +4,6 @@ import { MovieService } from './movie.service';
 import { IMovie } from './movie';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ],
diff --git a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts
index c194bc50bd..b0b57f018c 100644
--- a/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts
+++ b/public/docs/_examples/cb-ajs-quick-reference/ts/src/app/movie-list.component.ts
@@ -8,7 +8,6 @@ import { MovieService } from './movie.service';
 
 // #docregion component
 @Component({
-  moduleId: module.id,
   selector: 'movie-list',
   templateUrl: './movie-list.component.html',
 // #docregion style-url
diff --git a/public/docs/_examples/cb-aot-compiler/ts/src/app/app.component.ts b/public/docs/_examples/cb-aot-compiler/ts/src/app/app.component.ts
index 680c07d682..879f7f663c 100644
--- a/public/docs/_examples/cb-aot-compiler/ts/src/app/app.component.ts
+++ b/public/docs/_examples/cb-aot-compiler/ts/src/app/app.component.ts
@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/_examples/cb-aot-compiler/ts/src/index.html b/public/docs/_examples/cb-aot-compiler/ts/src/index.html
index 9016f3cbe1..09e5f0de0e 100644
--- a/public/docs/_examples/cb-aot-compiler/ts/src/index.html
+++ b/public/docs/_examples/cb-aot-compiler/ts/src/index.html
@@ -10,9 +10,6 @@
 
     <script src="node_modules/core-js/client/shim.min.js"></script>
     <script src="node_modules/zone.js/dist/zone.js"></script>
-    <!-- #docregion moduleId -->
-    <script>window.module = 'aot';</script>
-    <!-- #enddocregion moduleId -->
   </head>
   <body>
     <my-app>Loading...</my-app>
diff --git a/public/docs/_examples/cb-component-communication/ts/src/app/app.component.ts b/public/docs/_examples/cb-component-communication/ts/src/app/app.component.ts
index ab2d3d9c33..7556beb1ff 100644
--- a/public/docs/_examples/cb-component-communication/ts/src/app/app.component.ts
+++ b/public/docs/_examples/cb-component-communication/ts/src/app/app.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/_examples/cb-component-relative-paths/e2e-spec.ts b/public/docs/_examples/cb-component-relative-paths/e2e-spec.ts
deleted file mode 100644
index 13e1636f2e..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/e2e-spec.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-'use strict'; // necessary for es6 output in node 
-
-import { browser, element, by, ElementFinder } from 'protractor';
-
-describe('Cookbook: component-relative paths', function () {
-
-  interface Page {
-    title: ElementFinder;
-    absComp: ElementFinder;
-    relComp: ElementFinder;
-
-  }
-  function getPageStruct() {
-    return {
-      title: element( by.tagName( 'h1' )),
-      absComp: element( by.css( 'absolute-path div' ) ),
-      relComp: element( by.css( 'relative-path div' ) )
-    };
-  }
-
-  let page: Page;
-  beforeAll(function () {
-      browser.get('');
-      page = getPageStruct();
-  });
-
-  it('should display title of the sample', function () {
-    expect(element(by.tagName('h1')).getText()).toContain('Paths');
-  });
-
-  it('should have absolute-path element', function () {
-    expect(page.absComp.isPresent()).toBe(true, 'no <absolute-path> element');
-  });
-
-  it('should display the absolute path text', function () {
-    expect(page.absComp.getText()).toContain('Absolute');
-  });
-
-  it('should display the component-relative path text', function () {
-    expect(page.relComp.getText()).toContain('Component-relative');
-  });
-});
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/example-config.json b/public/docs/_examples/cb-component-relative-paths/ts/example-config.json
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/plnkr.json b/public/docs/_examples/cb-component-relative-paths/ts/plnkr.json
deleted file mode 100644
index 21002e1d2f..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/plnkr.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-	"description": "Module-relative Paths",
-  "basePath": "src/",
-	"files": [
-		"!**/*.d.ts",
-		"!**/*.js"
-	],
-	"tags": [ "cookbook" ]
-}
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/src/app/app.component.ts b/public/docs/_examples/cb-component-relative-paths/ts/src/app/app.component.ts
deleted file mode 100644
index 8b469886ee..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/src/app/app.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-selector: 'my-app',
-template:
-  `<h1>Absolute & <i>Component-Relative</i> Paths</h1>
-  <absolute-path></absolute-path>
-  <relative-path></relative-path>
-  `
-})
-export class AppComponent {}
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/src/app/app.module.ts b/public/docs/_examples/cb-component-relative-paths/ts/src/app/app.module.ts
deleted file mode 100644
index a13f4b144f..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/src/app/app.module.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { SomeAbsoluteComponent, SomeRelativeComponent } from './some.component';
-
-@NgModule({
-  imports: [
-    BrowserModule
-  ],
-  declarations: [
-    AppComponent,
-    SomeAbsoluteComponent,
-    SomeRelativeComponent
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.css b/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.css
deleted file mode 100644
index f43e11f60e..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/* #docregion */
-div.absolute {
-  background: beige;
-  border: 1px solid darkred;
-  color: red;
-  margin: 8px;
-  max-width: 20em;
-  padding: 4px;
-  text-align: center;
-}
-
-div.relative {
-  background: powderblue;
-  border: 1px solid darkblue;
-  color: Blue;
-  font-style: italic;
-  margin: 8px;
-  max-width: 20em;
-  padding: 4px;
-  text-align: center;
-}
-
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.html b/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.html
deleted file mode 100644
index 027741ce55..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<!-- #docregion -->
-<div class={{class}}>
-  {{type}}<br>{{path}}
-</div>
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.ts b/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.ts
deleted file mode 100644
index 327727873c..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/src/app/some.component.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-///////// Using Absolute Paths ///////
-
-// #docregion absolute-config
-@Component({
-  selector: 'absolute-path',
-  templateUrl: 'app/some.component.html',
-  styleUrls:  ['app/some.component.css']
-})
-// #enddocregion absolute-config
-export class SomeAbsoluteComponent {
-  class = 'absolute';
-  type = 'Absolute template & style URLs';
-  path = 'app/path.component.html';
-}
-
-///////// Using Relative Paths ///////
-
-// #docregion relative-config
-@Component({
-  // #docregion module-id
-  moduleId: module.id,
-  // #enddocregion module-id
-  selector: 'relative-path',
-  templateUrl: './some.component.html',
-  styleUrls:  ['./some.component.css']
-})
-// #enddocregion relative-config
-
-export class SomeRelativeComponent {
-  class = 'relative';
-  type = 'Component-relative template & style URLs';
-  path = 'path.component.html';
-
-}
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/src/index.html b/public/docs/_examples/cb-component-relative-paths/ts/src/index.html
deleted file mode 100644
index e951f9f016..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/src/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <base href="/">
-
-  <title>
-    Component-Relative Paths
-  </title>
-
-  <!-- #docregion style -->
-  <link rel="stylesheet" type="text/css" 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>
-</body>
-</html>
diff --git a/public/docs/_examples/cb-component-relative-paths/ts/src/main.ts b/public/docs/_examples/cb-component-relative-paths/ts/src/main.ts
deleted file mode 100644
index 311c44b76d..0000000000
--- a/public/docs/_examples/cb-component-relative-paths/ts/src/main.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.ts b/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.ts
index a3b938f7e5..3045893c58 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/src/app/app.component.ts
@@ -7,7 +7,6 @@ import { UserContextService } from './user-context.service';
 import { UserService }        from './user.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html',
 // #docregion providers
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts
index 24d0bd168b..024571a7c2 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form-question.component.ts
@@ -5,7 +5,6 @@ import { FormGroup }        from '@angular/forms';
 import { QuestionBase }     from './question-base';
 
 @Component({
-  moduleId: module.id,
   selector: 'df-question',
   templateUrl: './dynamic-form-question.component.html'
 })
diff --git a/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts
index 32aaf73114..8d95c0d3a4 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts
+++ b/public/docs/_examples/cb-dynamic-form/ts/src/app/dynamic-form.component.ts
@@ -6,7 +6,6 @@ import { QuestionBase }              from './question-base';
 import { QuestionControlService }    from './question-control.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'dynamic-form',
   templateUrl: './dynamic-form.component.html',
   providers: [ QuestionControlService ]
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts b/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts
index 4bbefadb96..241ff1e782 100644
--- a/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.ts
@@ -8,7 +8,6 @@ import { Hero }                   from '../shared/hero';
 import { forbiddenNameValidator } from '../shared/forbidden-name.directive';
 
 @Component({
-  moduleId:  module.id,
   selector: 'hero-form-reactive3',
   templateUrl: './hero-form-reactive.component.html'
 })
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts
index b096ca8cf4..1bc29db44d 100644
--- a/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template1.component.ts
@@ -7,7 +7,6 @@ import { Component } from '@angular/core';
 import { Hero }      from '../shared/hero';
 
 @Component({
-  moduleId:  module.id,
   selector: 'hero-form-template1',
   templateUrl: './hero-form-template1.component.html'
 })
diff --git a/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts
index 8b3e150347..320ef09efd 100644
--- a/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts
+++ b/public/docs/_examples/cb-form-validation/ts/src/app/template/hero-form-template2.component.ts
@@ -7,7 +7,6 @@ import { NgForm } from '@angular/forms';
 import { Hero }      from '../shared/hero';
 
 @Component({
-  moduleId:  module.id,
   selector: 'hero-form-template2',
   templateUrl: './hero-form-template2.component.html'
 })
diff --git a/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts b/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts
index 09adc99d2a..3b1f57671e 100644
--- a/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts
+++ b/public/docs/_examples/cb-i18n/ts/src/app/app.component.ts
@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6
index 8e65fff539..d425788f46 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/app.component.es6
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html',
   styles: [
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6
index c9be28c44c..f01fa4de40 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/confirm.component.es6
@@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 // #docregion
 @Component({
-  moduleId: module.id,
   selector: 'app-confirm',
   templateUrl: './confirm.component.html'
 })
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
index 32988dcdda..04c14a9631 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/src/app/hero-title.component.es6
@@ -3,7 +3,6 @@ import { Attribute, Component, Inject, Optional } from '@angular/core';
 // #docregion
 // #docregion templateUrl
 @Component({
-  moduleId: module.id,
   selector: 'hero-title',
   templateUrl: './hero-title.component.html'
 })
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.es6
index 3084439b2a..6079f7f246 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/app.component.es6
@@ -8,7 +8,6 @@ export class AppComponent {
 
 AppComponent.annotations = [
   new Component({
-    moduleId: module.id,
     selector: 'my-app',
     templateUrl: './app.component.html',
     styles: [
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6
index 3e72036952..296268dda4 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/confirm.component.es6
@@ -16,7 +16,6 @@ export class ConfirmComponent {
 
 ConfirmComponent.annotations = [
   new Component({
-    moduleId: module.id,
     selector: 'app-confirm',
     templateUrl: './confirm.component.html',
     inputs: [
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6
index 1656226602..4b89dfba83 100644
--- a/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/src/app/hero-title.component.es6
@@ -16,7 +16,6 @@ export class HeroTitleComponent {
 // #docregion templateUrl
 HeroTitleComponent.annotations = [
   new Component({
-    moduleId: module.id,
     selector: 'hero-title',
     templateUrl: './hero-title.component.html'
   })
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/app.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/app.component.ts
index 8e7afad0df..912c9e1a80 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/src/app/app.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/app.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html',
   styles: [
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/confirm.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/confirm.component.ts
index c9be28c44c..f01fa4de40 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/src/app/confirm.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/confirm.component.ts
@@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 // #docregion
 @Component({
-  moduleId: module.id,
   selector: 'app-confirm',
   templateUrl: './confirm.component.html'
 })
diff --git a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts
index e8e68684e2..48aaae7d44 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/src/app/hero-title.component.ts
@@ -3,7 +3,6 @@ import { Attribute, Component, Inject, Optional } from '@angular/core';
 // #docregion
 // #docregion templateUrl
 @Component({
-  moduleId: module.id,
   selector: 'hero-title',
   templateUrl: './hero-title.component.html'
 })
diff --git a/public/docs/_examples/component-styles/e2e-spec.ts b/public/docs/_examples/component-styles/e2e-spec.ts
index 28a44221a4..32bd30832c 100644
--- a/public/docs/_examples/component-styles/e2e-spec.ts
+++ b/public/docs/_examples/component-styles/e2e-spec.ts
@@ -1,4 +1,4 @@
-'use strict'; // necessary for es6 output in node 
+'use strict'; // necessary for es6 output in node
 
 import { browser, element, by } from 'protractor';
 
@@ -65,9 +65,4 @@ describe('Component Style Tests', function () {
     expect(externalLi.getCssValue('listStyleType')).not.toEqual('square');
   });
 
-  it('supports relative loading with moduleId', function() {
-    let host = element(by.css('quest-summary'));
-    expect(host.getCssValue('color')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff
-  });
-
 });
diff --git a/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts b/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts
index c43239e368..2a2dc65fe0 100644
--- a/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts
+++ b/public/docs/_examples/component-styles/ts/src/app/quest-summary.component.ts
@@ -4,7 +4,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
 
 // #docregion
 @Component({
-  moduleId: module.id,
   selector: 'quest-summary',
   // #docregion urls
   templateUrl: './quest-summary.component.html',
diff --git a/public/docs/_examples/forms/ts/src/app/hero-form.component.ts b/public/docs/_examples/forms/ts/src/app/hero-form.component.ts
index b2db8aaafd..34be523a7f 100644
--- a/public/docs/_examples/forms/ts/src/app/hero-form.component.ts
+++ b/public/docs/_examples/forms/ts/src/app/hero-form.component.ts
@@ -5,7 +5,6 @@ import { Component } from '@angular/core';
 import { Hero }    from './hero';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-form',
   templateUrl: './hero-form.component.html'
 })
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.component.ts
index 78d0f97763..ac66d3cfec 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.component.ts
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/hero-tax-return.component.ts
@@ -4,7 +4,6 @@ import { HeroTaxReturn }        from './hero';
 import { HeroTaxReturnService } from './hero-tax-return.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-tax-return',
   templateUrl: './hero-tax-return.component.html',
   styleUrls: [ './hero-tax-return.component.css' ],
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.ts b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.ts
index 105aaca14f..9390d7ec3e 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.ts
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/src/app/villains-list.component.ts
@@ -6,7 +6,6 @@ import { Villain, VillainsService } from './villains.service';
 
 // #docregion metadata
 @Component({
-  moduleId: module.id,
   selector: 'villains-list',
   templateUrl: './villains-list.component.html',
   providers: [ VillainsService ]
diff --git a/public/docs/_examples/homepage-hello-world/ts/src/app/hello_world.ts b/public/docs/_examples/homepage-hello-world/ts/src/app/hello_world.ts
index 7bdf994436..145d22e1e9 100644
--- a/public/docs/_examples/homepage-hello-world/ts/src/app/hello_world.ts
+++ b/public/docs/_examples/homepage-hello-world/ts/src/app/hello_world.ts
@@ -2,9 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  // Set the base for module-relative URLs
-  moduleId: module.id,
-
   // Declare the tag name in index.html to where the component attaches
   selector: 'hello-world',
 
diff --git a/public/docs/_examples/lifecycle-hooks/ts/src/app/app.component.ts b/public/docs/_examples/lifecycle-hooks/ts/src/app/app.component.ts
index a917088410..5bd535a113 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/src/app/app.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/src/app/app.component.ts
@@ -1,7 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/_examples/lifecycle-hooks/ts/src/app/do-check.component.ts b/public/docs/_examples/lifecycle-hooks/ts/src/app/do-check.component.ts
index bdd96ed65b..6196dd8edd 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/src/app/do-check.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/src/app/do-check.component.ts
@@ -75,7 +75,6 @@ export class DoCheckComponent implements DoCheck {
 /***************************************/
 
 @Component({
-  moduleId: module.id,
   selector: 'do-check-parent',
   templateUrl: './do-check-parent.component.html',
   styles: ['.parent {background: Lavender}']
diff --git a/public/docs/_examples/lifecycle-hooks/ts/src/app/on-changes.component.ts b/public/docs/_examples/lifecycle-hooks/ts/src/app/on-changes.component.ts
index c9a243a5f0..a5a49a61e9 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/src/app/on-changes.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/src/app/on-changes.component.ts
@@ -49,7 +49,6 @@ export class OnChangesComponent implements OnChanges {
 /***************************************/
 
 @Component({
-  moduleId: module.id,
   selector: 'on-changes-parent',
   templateUrl: './on-changes-parent.component.html',
   styles: ['.parent {background: Lavender;}']
diff --git a/public/docs/_examples/lifecycle-hooks/ts/src/app/spy.component.ts b/public/docs/_examples/lifecycle-hooks/ts/src/app/spy.component.ts
index 6cbed98d1d..0f3b0d35f1 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/src/app/spy.component.ts
+++ b/public/docs/_examples/lifecycle-hooks/ts/src/app/spy.component.ts
@@ -4,7 +4,6 @@ import { Component } from '@angular/core';
 import { LoggerService }  from './logger.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'spy-parent',
   templateUrl: './spy.component.html',
   styles: [
diff --git a/public/docs/_examples/ngcontainer/ts/src/app/app.component.ts b/public/docs/_examples/ngcontainer/ts/src/app/app.component.ts
index 2d6d7f959c..65c511acd2 100644
--- a/public/docs/_examples/ngcontainer/ts/src/app/app.component.ts
+++ b/public/docs/_examples/ngcontainer/ts/src/app/app.component.ts
@@ -4,7 +4,6 @@ import { Component } from '@angular/core';
 import { heroes } from './hero';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
diff --git a/public/docs/_examples/ngmodule/ts/src/app/contact/contact.component.3.ts b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.component.3.ts
index fcc409b9af..ea6e9868ba 100644
--- a/public/docs/_examples/ngmodule/ts/src/app/contact/contact.component.3.ts
+++ b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.component.3.ts
@@ -5,7 +5,6 @@ import { Contact, ContactService } from './contact.service';
 import { UserService }    from '../user.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'app-contact',
   templateUrl: './contact.component.html',
   styleUrls: [ './contact.component.css' ]
diff --git a/public/docs/_examples/ngmodule/ts/src/app/contact/contact.component.ts b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.component.ts
index f9116a4213..d6dcbbc53f 100644
--- a/public/docs/_examples/ngmodule/ts/src/app/contact/contact.component.ts
+++ b/public/docs/_examples/ngmodule/ts/src/app/contact/contact.component.ts
@@ -6,7 +6,6 @@ import { Contact, ContactService } from './contact.service';
 import { UserService }             from '../core/user.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'app-contact',
   templateUrl: './contact.component.html',
   styleUrls: [ './contact.component.css' ]
diff --git a/public/docs/_examples/ngmodule/ts/src/app/core/title.component.ts b/public/docs/_examples/ngmodule/ts/src/app/core/title.component.ts
index 5fbd64d5fd..b52a57aa13 100644
--- a/public/docs/_examples/ngmodule/ts/src/app/core/title.component.ts
+++ b/public/docs/_examples/ngmodule/ts/src/app/core/title.component.ts
@@ -3,7 +3,6 @@ import { Component, Input } from '@angular/core';
 import { UserService }      from '../core/user.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'app-title',
   templateUrl: './title.component.html',
 })
diff --git a/public/docs/_examples/ngmodule/ts/src/app/title.component.ts b/public/docs/_examples/ngmodule/ts/src/app/title.component.ts
index c5815edcbd..9a2ef1c4b8 100644
--- a/public/docs/_examples/ngmodule/ts/src/app/title.component.ts
+++ b/public/docs/_examples/ngmodule/ts/src/app/title.component.ts
@@ -7,7 +7,6 @@ import { UserService } from './user.service';
 // #docregion v1
 
 @Component({
-  moduleId: module.id,
   selector: 'app-title',
   templateUrl: './title.component.html',
 })
diff --git a/public/docs/_examples/pipes/ts/src/app/app.component.ts b/public/docs/_examples/pipes/ts/src/app/app.component.ts
index d21801ddcf..090eae7766 100644
--- a/public/docs/_examples/pipes/ts/src/app/app.component.ts
+++ b/public/docs/_examples/pipes/ts/src/app/app.component.ts
@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/_examples/pipes/ts/src/app/flying-heroes.component.ts b/public/docs/_examples/pipes/ts/src/app/flying-heroes.component.ts
index 295620310b..e4abb09a2f 100644
--- a/public/docs/_examples/pipes/ts/src/app/flying-heroes.component.ts
+++ b/public/docs/_examples/pipes/ts/src/app/flying-heroes.component.ts
@@ -5,7 +5,6 @@ import { Component }              from '@angular/core';
 import { HEROES }                 from './heroes';
 
 @Component({
-  moduleId: module.id,
   selector: 'flying-heroes',
   templateUrl: './flying-heroes.component.html',
   styles: ['#flyers, #all {font-style: italic}']
@@ -50,7 +49,6 @@ export class FlyingHeroesComponent {
 ////// Identical except for impure pipe //////
 // #docregion impure-component
 @Component({
-  moduleId: module.id,
   selector: 'flying-heroes-impure',
   templateUrl: './flying-heroes-impure.component.html',
 // #enddocregion impure-component
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/app.component.1.ts b/public/docs/_examples/reactive-forms/ts/src/app/app.component.1.ts
index 4ab3949863..3023618334 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/app.component.1.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/app.component.1.ts
@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   template: `
   <div class="container">
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/app.component.ts b/public/docs/_examples/reactive-forms/ts/src/app/app.component.ts
index e41b9f8b35..d30a38e979 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/app.component.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/app.component.ts
@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   template: `
   <div class="container">
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/demo.component.ts b/public/docs/_examples/reactive-forms/ts/src/app/demo.component.ts
index 5e3a95636d..181726eb66 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/demo.component.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/demo.component.ts
@@ -6,9 +6,8 @@ import { Hero }        from './data-model';
 import { HeroService } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
-  templateUrl: 'demo.component.html'
+  templateUrl: './demo.component.html'
 })
 export class DemoComponent {
 
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-1.component.ts b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-1.component.ts
index 586ca36e76..318dfff145 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-1.component.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-1.component.ts
@@ -5,7 +5,6 @@ import { FormControl }            from '@angular/forms';
 // #enddocregion
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail-1',
   templateUrl: './hero-detail-1.component.html'
 })
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-2.component.ts b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-2.component.ts
index e3c0448a7f..6aa3c1ed3a 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-2.component.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-2.component.ts
@@ -5,7 +5,6 @@ import { FormControl, FormGroup } from '@angular/forms';
 // #enddocregion imports
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail-2',
   templateUrl: './hero-detail-2.component.html'
 })
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-3.component.ts b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-3.component.ts
index 400c6911d6..54a4e93361 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-3.component.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-3.component.ts
@@ -5,7 +5,6 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 // #enddocregion imports
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail-3',
   templateUrl: './hero-detail-3.component.html'
 })
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-3a.component.ts b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-3a.component.ts
index b76803d7ed..2347869967 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-3a.component.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-3a.component.ts
@@ -5,7 +5,6 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 // #enddocregion imports
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail-3',
   templateUrl: './hero-detail-3.component.html'
 })
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-4.component.ts b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-4.component.ts
index 8705765a56..d2f1ea2f96 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-4.component.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-4.component.ts
@@ -7,7 +7,6 @@ import { states } from './data-model';
 // #enddocregion imports
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail-4',
   templateUrl: './hero-detail-4.component.html'
 })
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-5.component.ts b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-5.component.ts
index 2bafd0709e..f4be33389f 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-5.component.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-5.component.ts
@@ -5,7 +5,6 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { states } from './data-model';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail-5',
   templateUrl: './hero-detail-5.component.html'
 })
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-6.component.ts b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-6.component.ts
index 9c592a953e..d5136822d1 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-6.component.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-6.component.ts
@@ -11,7 +11,6 @@ import { Hero, states } from './data-model';
 ////////// 6 ////////////////////
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail-6',
   templateUrl: './hero-detail-5.component.html'
 })
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-7.component.ts b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-7.component.ts
index 674b2b263b..497c7f6a56 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-7.component.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-7.component.ts
@@ -11,7 +11,6 @@ import { Address, Hero, states } from './data-model';
 // #enddocregion imports
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail-7',
   templateUrl: './hero-detail-5.component.html'
 })
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-8.component.ts b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-8.component.ts
index 99cd6f822a..1141c836a7 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-8.component.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-8.component.ts
@@ -7,7 +7,6 @@ import { Address, Hero, states } from './data-model';
 // #enddocregion imports
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail-8',
   templateUrl: './hero-detail-8.component.html'
 })
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail.component.ts b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail.component.ts
index a644e54ffb..4cb69aaedf 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail.component.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail.component.ts
@@ -10,7 +10,6 @@ import { HeroService }           from './hero.service';
 
 // #docregion metadata
 @Component({
-  moduleId: module.id,
   selector: 'hero-detail',
   templateUrl: './hero-detail.component.html'
 })
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-list.component.ts b/public/docs/_examples/reactive-forms/ts/src/app/hero-list.component.ts
index 58fb2e7991..98092adcdb 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-list.component.ts
+++ b/public/docs/_examples/reactive-forms/ts/src/app/hero-list.component.ts
@@ -7,9 +7,8 @@ import { Hero }        from './data-model';
 import { HeroService } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list',
-  templateUrl: 'hero-list.component.html'
+  templateUrl: './hero-list.component.html'
 })
 export class HeroListComponent implements OnInit {
   heroes: Observable<Hero[]>;
diff --git a/public/docs/_examples/router/ts/src/app/compose-message.component.ts b/public/docs/_examples/router/ts/src/app/compose-message.component.ts
index 38fd47fded..17a0953378 100644
--- a/public/docs/_examples/router/ts/src/app/compose-message.component.ts
+++ b/public/docs/_examples/router/ts/src/app/compose-message.component.ts
@@ -5,7 +5,6 @@ import { Router }                 from '@angular/router';
 import { slideInDownAnimation }   from './animations';
 
 @Component({
-  moduleId: module.id,
   templateUrl: './compose-message.component.html',
   styles: [ ':host { position: relative; bottom: 10%; }' ],
   animations: [ slideInDownAnimation ]
diff --git a/public/docs/_examples/security/ts/src/app/bypass-security.component.ts b/public/docs/_examples/security/ts/src/app/bypass-security.component.ts
index 769c0ba95a..ff41e287ba 100644
--- a/public/docs/_examples/security/ts/src/app/bypass-security.component.ts
+++ b/public/docs/_examples/security/ts/src/app/bypass-security.component.ts
@@ -5,7 +5,6 @@ import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browse
 
 @Component({
   selector: 'bypass-security',
-  moduleId: module.id,
   templateUrl: './bypass-security.component.html',
 })
 export class BypassSecurityComponent {
diff --git a/public/docs/_examples/security/ts/src/app/inner-html-binding.component.ts b/public/docs/_examples/security/ts/src/app/inner-html-binding.component.ts
index 23c921e979..8319503686 100644
--- a/public/docs/_examples/security/ts/src/app/inner-html-binding.component.ts
+++ b/public/docs/_examples/security/ts/src/app/inner-html-binding.component.ts
@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'inner-html-binding',
   templateUrl: './inner-html-binding.component.html',
 })
diff --git a/public/docs/_examples/server-communication/ts/src/app/toh/hero-list.component.promise.ts b/public/docs/_examples/server-communication/ts/src/app/toh/hero-list.component.promise.ts
index abe6a554e9..4bbe7eade2 100644
--- a/public/docs/_examples/server-communication/ts/src/app/toh/hero-list.component.promise.ts
+++ b/public/docs/_examples/server-communication/ts/src/app/toh/hero-list.component.promise.ts
@@ -6,7 +6,6 @@ import { HeroService }       from './hero.service.promise';
 
 @Component({
   selector: 'hero-list-promise',
-  moduleId: module.id,
   templateUrl: './hero-list.component.html',
   providers: [ HeroService ],
   styles: ['.error {color:red;}']
diff --git a/public/docs/_examples/server-communication/ts/src/app/toh/hero-list.component.ts b/public/docs/_examples/server-communication/ts/src/app/toh/hero-list.component.ts
index e28faacc0e..50b724a3df 100644
--- a/public/docs/_examples/server-communication/ts/src/app/toh/hero-list.component.ts
+++ b/public/docs/_examples/server-communication/ts/src/app/toh/hero-list.component.ts
@@ -5,7 +5,6 @@ import { Hero }              from './hero';
 import { HeroService }       from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-list',
   templateUrl: './hero-list.component.html',
   providers: [ HeroService ],
diff --git a/public/docs/_examples/server-communication/ts/src/app/wiki/wiki-smart.component.ts b/public/docs/_examples/server-communication/ts/src/app/wiki/wiki-smart.component.ts
index ec95472b98..fc453a820e 100644
--- a/public/docs/_examples/server-communication/ts/src/app/wiki/wiki-smart.component.ts
+++ b/public/docs/_examples/server-communication/ts/src/app/wiki/wiki-smart.component.ts
@@ -16,7 +16,6 @@ import { Subject } from 'rxjs/Subject';
 import { WikipediaService } from './wikipedia.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-wiki-smart',
   template: `
     <h1>Smarter Wikipedia Demo</h1>
diff --git a/public/docs/_examples/structural-directives/ts/src/app/app.component.ts b/public/docs/_examples/structural-directives/ts/src/app/app.component.ts
index 5fd9dc417f..ff6f0e65a1 100644
--- a/public/docs/_examples/structural-directives/ts/src/app/app.component.ts
+++ b/public/docs/_examples/structural-directives/ts/src/app/app.component.ts
@@ -4,7 +4,6 @@ import { Component } from '@angular/core';
 import { Hero, heroes } from './hero';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
diff --git a/public/docs/_examples/style-guide/ts/src/01-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/src/01-01/app/app.component.ts
index 7997c4433c..d5bb953540 100644
--- a/public/docs/_examples/style-guide/ts/src/01-01/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/01-01/app/app.component.ts
@@ -4,7 +4,6 @@ import { Component } from '@angular/core';
 import { HeroService } from './heroes';
 
 @Component({
-  moduleId: module.id,
   selector: 'toh-app',
   template: `
       <toh-heroes></toh-heroes>
diff --git a/public/docs/_examples/style-guide/ts/src/02-05/app/app.component.ts b/public/docs/_examples/style-guide/ts/src/02-05/app/app.component.ts
index 268a2f940b..66ebfa954e 100644
--- a/public/docs/_examples/style-guide/ts/src/02-05/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/02-05/app/app.component.ts
@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'toh-app',
   template: `
       Tour of Heroes
diff --git a/public/docs/_examples/style-guide/ts/src/03-06/app/app.component.ts b/public/docs/_examples/style-guide/ts/src/03-06/app/app.component.ts
index b7c47f72d0..8ec308bc6a 100644
--- a/public/docs/_examples/style-guide/ts/src/03-06/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/03-06/app/app.component.ts
@@ -4,7 +4,6 @@ import { Hero, HeroService } from './heroes';
 import { ExceptionService, SpinnerService, ToastService } from './core';
 
 @Component({
-  moduleId: module.id,
   selector: 'sg-app',
   templateUrl: './app.component.html',
   providers: [HeroService, ExceptionService, SpinnerService, ToastService]
diff --git a/public/docs/_examples/style-guide/ts/src/04-08/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/src/04-08/app/heroes/heroes.component.ts
index f9e67391ec..e2df4c91fd 100644
--- a/public/docs/_examples/style-guide/ts/src/04-08/app/heroes/heroes.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/04-08/app/heroes/heroes.component.ts
@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'toh-heroes',
   templateUrl: './heroes.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/04-10/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/src/04-10/app/heroes/heroes.component.ts
index eb496ccde5..376567650e 100644
--- a/public/docs/_examples/style-guide/ts/src/04-10/app/heroes/heroes.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/04-10/app/heroes/heroes.component.ts
@@ -4,7 +4,6 @@ import { Component } from '@angular/core';
 import { FilterTextService } from '../shared/filter-text/filter-text.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'toh-heroes',
   templateUrl: './heroes.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/04-10/app/shared/filter-text/filter-text.component.ts b/public/docs/_examples/style-guide/ts/src/04-10/app/shared/filter-text/filter-text.component.ts
index e23987d2f0..fffe4bf0b7 100644
--- a/public/docs/_examples/style-guide/ts/src/04-10/app/shared/filter-text/filter-text.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/04-10/app/shared/filter-text/filter-text.component.ts
@@ -2,7 +2,6 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'toh-filter-text',
   template: '<input type="text" id="filterText" [(ngModel)]="filter" (keyup)="filterChanged($event)" />'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/04-11/app/core/nav/nav.component.ts b/public/docs/_examples/style-guide/ts/src/04-11/app/core/nav/nav.component.ts
index 571040cce5..7e21016e2b 100644
--- a/public/docs/_examples/style-guide/ts/src/04-11/app/core/nav/nav.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/04-11/app/core/nav/nav.component.ts
@@ -2,7 +2,6 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'toh-nav',
   templateUrl: './nav.component.html',
   styleUrls: ['./nav.component.css'],
diff --git a/public/docs/_examples/style-guide/ts/src/04-11/app/core/spinner/spinner.component.ts b/public/docs/_examples/style-guide/ts/src/04-11/app/core/spinner/spinner.component.ts
index ccd6ece7fb..de24167a2b 100644
--- a/public/docs/_examples/style-guide/ts/src/04-11/app/core/spinner/spinner.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/04-11/app/core/spinner/spinner.component.ts
@@ -6,7 +6,6 @@ import { LoggerService } from '../logger.service';
 import { SpinnerState, SpinnerService } from './spinner.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'toh-spinner',
   templateUrl: './spinner.component.html',
   styleUrls: ['./spinner.component.css']
diff --git a/public/docs/_examples/style-guide/ts/src/04-11/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/src/04-11/app/heroes/heroes.component.ts
index cdbf1135f2..856baadd74 100644
--- a/public/docs/_examples/style-guide/ts/src/04-11/app/heroes/heroes.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/04-11/app/heroes/heroes.component.ts
@@ -4,7 +4,6 @@ import { LoggerService }  from '../core/logger.service';
 import { SpinnerService } from '../core/spinner/spinner.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'toh-heroes',
   templateUrl: './heroes.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/04-12/app/core/nav/nav.component.ts b/public/docs/_examples/style-guide/ts/src/04-12/app/core/nav/nav.component.ts
index 571040cce5..7e21016e2b 100644
--- a/public/docs/_examples/style-guide/ts/src/04-12/app/core/nav/nav.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/04-12/app/core/nav/nav.component.ts
@@ -2,7 +2,6 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'toh-nav',
   templateUrl: './nav.component.html',
   styleUrls: ['./nav.component.css'],
diff --git a/public/docs/_examples/style-guide/ts/src/04-12/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/src/04-12/app/heroes/heroes.component.ts
index 3b3e169c0c..f84b16c140 100644
--- a/public/docs/_examples/style-guide/ts/src/04-12/app/heroes/heroes.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/04-12/app/heroes/heroes.component.ts
@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 import { LoggerService } from '../core/logger.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'toh-heroes',
   templateUrl: './heroes.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/05-02/app/app.component.ts b/public/docs/_examples/style-guide/ts/src/05-02/app/app.component.ts
index d57163f06f..7c9f37919f 100644
--- a/public/docs/_examples/style-guide/ts/src/05-02/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/05-02/app/app.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'sg-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
index fd055bf64f..e48d41f721 100644
--- a/public/docs/_examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -4,7 +4,6 @@ import { Component } from '@angular/core';
 /* avoid */
 
 @Component({
-  moduleId: module.id,
   selector: 'tohHeroButton',
   templateUrl: './hero-button.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts
index 8b9fbf95e5..c90c966f1a 100644
--- a/public/docs/_examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/05-02/app/heroes/shared/hero-button/hero-button.component.ts
@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
-  moduleId: module.id,
   selector: 'toh-hero-button',
   templateUrl: './hero-button.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/05-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/src/05-03/app/app.component.ts
index d57163f06f..7c9f37919f 100644
--- a/public/docs/_examples/style-guide/ts/src/05-03/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/05-03/app/app.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'sg-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
index 6edbc4cd9e..74f5c36339 100644
--- a/public/docs/_examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 /* avoid */
 
 @Component({
-  moduleId: module.id,
   selector: '[tohHeroButton]',
   templateUrl: './hero-button.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts
index 8b9fbf95e5..c90c966f1a 100644
--- a/public/docs/_examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/05-03/app/heroes/shared/hero-button/hero-button.component.ts
@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
-  moduleId: module.id,
   selector: 'toh-hero-button',
   templateUrl: './hero-button.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/05-04/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/src/05-04/app/heroes/heroes.component.ts
index ec5dadc4a0..c19bc997ae 100644
--- a/public/docs/_examples/style-guide/ts/src/05-04/app/heroes/heroes.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/05-04/app/heroes/heroes.component.ts
@@ -5,7 +5,6 @@ import { Hero, HeroService } from './shared';
 
 // #docregion example
 @Component({
-  moduleId: module.id,
   selector: 'toh-heroes',
   templateUrl: './heroes.component.html',
   styleUrls:  ['./heroes.component.css']
diff --git a/public/docs/_examples/style-guide/ts/src/05-13/app/app.component.ts b/public/docs/_examples/style-guide/ts/src/05-13/app/app.component.ts
index d57163f06f..7c9f37919f 100644
--- a/public/docs/_examples/style-guide/ts/src/05-13/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/05-13/app/app.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'sg-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/05-16/app/app.component.ts b/public/docs/_examples/style-guide/ts/src/05-16/app/app.component.ts
index d57163f06f..7c9f37919f 100644
--- a/public/docs/_examples/style-guide/ts/src/05-16/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/05-16/app/app.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'sg-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/06-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/src/06-01/app/app.component.ts
index d57163f06f..7c9f37919f 100644
--- a/public/docs/_examples/style-guide/ts/src/06-01/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/06-01/app/app.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'sg-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/07-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/src/07-01/app/app.component.ts
index 638da66caf..354b0ec303 100644
--- a/public/docs/_examples/style-guide/ts/src/07-01/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/07-01/app/app.component.ts
@@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core';
 import { Hero, HeroService } from './heroes';
 
 @Component({
-  moduleId: module.id,
   selector: 'sg-app',
   templateUrl: './app.component.html',
   providers: [HeroService]
diff --git a/public/docs/_examples/style-guide/ts/src/app/app.component.ts b/public/docs/_examples/style-guide/ts/src/app/app.component.ts
index ab2d3d9c33..7556beb1ff 100644
--- a/public/docs/_examples/style-guide/ts/src/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/src/app/app.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/_examples/style-guide/ts/src/systemjs.custom.js b/public/docs/_examples/style-guide/ts/src/systemjs.custom.js
index 8181979346..3424b2b62d 100644
--- a/public/docs/_examples/style-guide/ts/src/systemjs.custom.js
+++ b/public/docs/_examples/style-guide/ts/src/systemjs.custom.js
@@ -39,7 +39,7 @@
 
   var packages = {};
   packageNames.forEach(function(pkgName) {
-    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+    packages[pkgName] = { main: 'index.js', defaultExtension: 'js', meta: { './*.js': { loader: 'systemjs-angular-loader.js' }} };
   });
 
   var config = {
diff --git a/public/docs/_examples/template-syntax/ts/src/app/app.component.ts b/public/docs/_examples/template-syntax/ts/src/app/app.component.ts
index 166948362f..00a7e05df7 100644
--- a/public/docs/_examples/template-syntax/ts/src/app/app.component.ts
+++ b/public/docs/_examples/template-syntax/ts/src/app/app.component.ts
@@ -16,7 +16,6 @@ export enum Color {Red, Green, Blue};
  * Giant grab bag of stuff to drive the chapter
  */
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.css' ]
diff --git a/public/docs/_examples/template-syntax/ts/src/app/hero-form.component.ts b/public/docs/_examples/template-syntax/ts/src/app/hero-form.component.ts
index 9a27902e1e..7bdc4a0bba 100644
--- a/public/docs/_examples/template-syntax/ts/src/app/hero-form.component.ts
+++ b/public/docs/_examples/template-syntax/ts/src/app/hero-form.component.ts
@@ -4,7 +4,6 @@ import { NgForm }                      from '@angular/forms';
 import { Hero } from './hero';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-form',
   templateUrl: './hero-form.component.html',
   styles: [`
diff --git a/public/docs/_examples/testing/ts/src/app/app.component.ts b/public/docs/_examples/testing/ts/src/app/app.component.ts
index a917088410..5bd535a113 100644
--- a/public/docs/_examples/testing/ts/src/app/app.component.ts
+++ b/public/docs/_examples/testing/ts/src/app/app.component.ts
@@ -1,7 +1,6 @@
 // #docregion
 import { Component } from '@angular/core';
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/_examples/testing/ts/src/app/bag/bag.ts b/public/docs/_examples/testing/ts/src/app/bag/bag.ts
index 41608d7acd..cbf1c21136 100644
--- a/public/docs/_examples/testing/ts/src/app/bag/bag.ts
+++ b/public/docs/_examples/testing/ts/src/app/bag/bag.ts
@@ -249,7 +249,6 @@ export class TestViewProvidersComponent {
 }
 
 @Component({
-  moduleId: module.id,
   selector: 'external-template-comp',
   templateUrl: './bag-external-template.html'
 })
@@ -273,7 +272,6 @@ export class ExternalTemplateComponent implements OnInit {
 export class InnerCompWithExternalTemplateComponent { }
 
 @Component({
-  moduleId: module.id,
   selector: 'bad-template-comp',
   templateUrl: './non-existant.html'
 })
diff --git a/public/docs/_examples/testing/ts/src/app/banner.component.ts b/public/docs/_examples/testing/ts/src/app/banner.component.ts
index 333f37bbcd..4355a40867 100644
--- a/public/docs/_examples/testing/ts/src/app/banner.component.ts
+++ b/public/docs/_examples/testing/ts/src/app/banner.component.ts
@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'app-banner',
   templateUrl: './banner.component.html',
   styleUrls:  ['./banner.component.css']
diff --git a/public/docs/_examples/testing/ts/src/app/dashboard/dashboard-hero.component.ts b/public/docs/_examples/testing/ts/src/app/dashboard/dashboard-hero.component.ts
index 4a8c4974fd..9f6be16d7d 100644
--- a/public/docs/_examples/testing/ts/src/app/dashboard/dashboard-hero.component.ts
+++ b/public/docs/_examples/testing/ts/src/app/dashboard/dashboard-hero.component.ts
@@ -5,7 +5,6 @@ import { Hero } from '../model';
 
 // #docregion component
 @Component({
-  moduleId: module.id,
   selector:    'dashboard-hero',
   templateUrl: './dashboard-hero.component.html',
   styleUrls: [ './dashboard-hero.component.css' ]
diff --git a/public/docs/_examples/testing/ts/src/app/dashboard/dashboard.component.ts b/public/docs/_examples/testing/ts/src/app/dashboard/dashboard.component.ts
index 40581094f6..3edaa0c0ab 100644
--- a/public/docs/_examples/testing/ts/src/app/dashboard/dashboard.component.ts
+++ b/public/docs/_examples/testing/ts/src/app/dashboard/dashboard.component.ts
@@ -5,7 +5,6 @@ import { Router }            from '@angular/router';
 import { Hero, HeroService } from '../model';
 
 @Component({
-  moduleId: module.id,
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: [ './dashboard.component.css' ]
diff --git a/public/docs/_examples/testing/ts/src/app/hero/hero-detail.component.ts b/public/docs/_examples/testing/ts/src/app/hero/hero-detail.component.ts
index 763c921650..25f13b0cd5 100644
--- a/public/docs/_examples/testing/ts/src/app/hero/hero-detail.component.ts
+++ b/public/docs/_examples/testing/ts/src/app/hero/hero-detail.component.ts
@@ -9,7 +9,6 @@ import { HeroDetailService } from './hero-detail.service';
 
 // #docregion prototype
 @Component({
-  moduleId: module.id,
   selector:    'app-hero-detail',
   templateUrl: './hero-detail.component.html',
   styleUrls:  ['./hero-detail.component.css' ],
diff --git a/public/docs/_examples/testing/ts/src/app/hero/hero-list.component.ts b/public/docs/_examples/testing/ts/src/app/hero/hero-list.component.ts
index 501e0000b6..c61ff23f0e 100644
--- a/public/docs/_examples/testing/ts/src/app/hero/hero-list.component.ts
+++ b/public/docs/_examples/testing/ts/src/app/hero/hero-list.component.ts
@@ -4,7 +4,6 @@ import { Router }            from '@angular/router';
 import { Hero, HeroService } from '../model';
 
 @Component({
-  moduleId: module.id,
   selector: 'app-heroes',
   templateUrl: './hero-list.component.html',
   styleUrls: [ './hero-list.component.css' ]
diff --git a/public/docs/_examples/toh-5/ts/src/app/app.component.ts b/public/docs/_examples/toh-5/ts/src/app/app.component.ts
index c3f92ec46b..96bc3fe694 100644
--- a/public/docs/_examples/toh-5/ts/src/app/app.component.ts
+++ b/public/docs/_examples/toh-5/ts/src/app/app.component.ts
@@ -2,7 +2,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   // #docregion template
   template: `
diff --git a/public/docs/_examples/toh-5/ts/src/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/src/app/dashboard.component.ts
index eb026eb6be..416cf8868e 100644
--- a/public/docs/_examples/toh-5/ts/src/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-5/ts/src/app/dashboard.component.ts
@@ -8,7 +8,6 @@ import { HeroService } from './hero.service';
 
 // #docregion metadata
 @Component({
-  moduleId: module.id,
   selector: 'my-dashboard',
   templateUrl: './dashboard.component.html',
   // #enddocregion metadata
diff --git a/public/docs/_examples/toh-5/ts/src/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/src/app/hero-detail.component.ts
index 5b9bea89fa..ad472e976e 100644
--- a/public/docs/_examples/toh-5/ts/src/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-5/ts/src/app/hero-detail.component.ts
@@ -10,7 +10,6 @@ import { Hero }         from './hero';
 import { HeroService }  from './hero.service';
 // #docregion metadata
 @Component({
-  moduleId: module.id,
   selector: 'my-hero-detail',
   templateUrl: './hero-detail.component.html',
   // #enddocregion metadata, v2
diff --git a/public/docs/_examples/toh-5/ts/src/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/src/app/heroes.component.ts
index ab6928addd..def615e6b9 100644
--- a/public/docs/_examples/toh-5/ts/src/app/heroes.component.ts
+++ b/public/docs/_examples/toh-5/ts/src/app/heroes.component.ts
@@ -8,9 +8,6 @@ import { HeroService } from './hero.service';
 
 // #docregion renaming, metadata
 @Component({
-  // #enddocregion renaming
-  moduleId: module.id,
-  // #docregion renaming
   selector: 'my-heroes',
   // #enddocregion renaming
   templateUrl: './heroes.component.html',
diff --git a/public/docs/_examples/toh-6/ts/aot/index.html b/public/docs/_examples/toh-6/ts/aot/index.html
index 1a64ca8cac..cb8ecc4461 100644
--- a/public/docs/_examples/toh-6/ts/aot/index.html
+++ b/public/docs/_examples/toh-6/ts/aot/index.html
@@ -10,9 +10,6 @@
 
     <script src="shim.min.js"></script>
     <script src="zone.min.js"></script>
-    <!-- #docregion moduleId -->
-    <script>window.module = 'aot';</script>
-    <!-- #enddocregion moduleId -->
   </head>
 
   <body>
diff --git a/public/docs/_examples/toh-6/ts/src/app/app.component.ts b/public/docs/_examples/toh-6/ts/src/app/app.component.ts
index d8a8507985..a9fe05a9a8 100644
--- a/public/docs/_examples/toh-6/ts/src/app/app.component.ts
+++ b/public/docs/_examples/toh-6/ts/src/app/app.component.ts
@@ -3,7 +3,6 @@
 import { Component }          from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   template: `
     <h1>{{title}}</h1>
diff --git a/public/docs/_examples/toh-6/ts/src/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/src/app/dashboard.component.ts
index 1eb93f9c01..9960aa77d4 100644
--- a/public/docs/_examples/toh-6/ts/src/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-6/ts/src/app/dashboard.component.ts
@@ -5,7 +5,6 @@ import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: [ './dashboard.component.css' ]
diff --git a/public/docs/_examples/toh-6/ts/src/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/src/app/hero-detail.component.ts
index 3f1c7b72f9..b3bbbd2f3d 100644
--- a/public/docs/_examples/toh-6/ts/src/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-6/ts/src/app/hero-detail.component.ts
@@ -8,7 +8,6 @@ import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-hero-detail',
   templateUrl: './hero-detail.component.html',
   styleUrls: [ './hero-detail.component.css' ]
diff --git a/public/docs/_examples/toh-6/ts/src/app/hero-search.component.ts b/public/docs/_examples/toh-6/ts/src/app/hero-search.component.ts
index 949ef897db..8b2d32f06b 100644
--- a/public/docs/_examples/toh-6/ts/src/app/hero-search.component.ts
+++ b/public/docs/_examples/toh-6/ts/src/app/hero-search.component.ts
@@ -20,7 +20,6 @@ import { HeroSearchService } from './hero-search.service';
 import { Hero } from './hero';
 
 @Component({
-  moduleId: module.id,
   selector: 'hero-search',
   templateUrl: './hero-search.component.html',
   styleUrls: [ './hero-search.component.css' ],
diff --git a/public/docs/_examples/toh-6/ts/src/app/heroes.component.ts b/public/docs/_examples/toh-6/ts/src/app/heroes.component.ts
index 2a92adfaa8..6350b803c4 100644
--- a/public/docs/_examples/toh-6/ts/src/app/heroes.component.ts
+++ b/public/docs/_examples/toh-6/ts/src/app/heroes.component.ts
@@ -6,7 +6,6 @@ import { Hero }                from './hero';
 import { HeroService }         from './hero.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-heroes',
   templateUrl: './heroes.component.html',
   styleUrls: [ './heroes.component.css' ]
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts
index e486ab3e6d..aa20ebb801 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-detail/phone-detail.component.ts
@@ -12,7 +12,6 @@ import { RouteParams } from '../ajs-upgraded-providers';
 
 // #docregion initialclass
 @Component({
-  moduleId: module.id,
   selector: 'phone-detail',
   templateUrl: './phone-detail.template.html',
   // #enddocregion initialclass
diff --git a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts
index bdd5930b79..1f51c6faa2 100644
--- a/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts
+++ b/public/docs/_examples/upgrade-phonecat-2-hybrid/ts/app/phone-list/phone-list.component.ts
@@ -10,7 +10,6 @@ import { Phone, PhoneData } from '../core/phone/phone.service';
 
 // #docregion downgrade-component
 @Component({
-  moduleId: module.id,
   selector: 'phone-list',
   templateUrl: 'phone-list.template.html'
 })
diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.ts
index 048a4104c8..32a3d40790 100644
--- a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.ts
+++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-detail/phone-detail.component.ts
@@ -8,7 +8,6 @@ import { Phone, PhoneData } from '../core/phone/phone.service';
 import { RouteParams } from '../ajs-upgraded-providers';
 
 @Component({
-  moduleId: module.id,
   templateUrl: 'phone-detail.template.html',
 })
 export class PhoneDetailComponent {
diff --git a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.ts
index d198774deb..40f522bec8 100644
--- a/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.ts
+++ b/public/docs/_examples/upgrade-phonecat-3-router/ts/app/phone-list/phone-list.component.ts
@@ -6,7 +6,6 @@ import { Component } from '@angular/core';
 import { Phone, PhoneData } from '../core/phone/phone.service';
 
 @Component({
-  moduleId: module.id,
   templateUrl: 'phone-list.template.html'
 })
 export class PhoneListComponent {
diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.ts
index 579dd5601e..dd47f746f6 100644
--- a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.ts
+++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-detail/phone-detail.component.ts
@@ -6,7 +6,6 @@ import { ActivatedRoute } from '@angular/router';
 import { Phone, PhoneData } from '../core/phone/phone.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'phone-detail',
   templateUrl: './phone-detail.template.html'
 })
diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.ts b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.ts
index 0d9eb07e21..6cfd172027 100644
--- a/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.ts
+++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/app/phone-list/phone-list.component.ts
@@ -4,7 +4,6 @@ import { Component } from '@angular/core';
 import { Phone, PhoneData } from '../core/phone/phone.service';
 
 @Component({
-  moduleId: module.id,
   selector: 'phone-list',
   templateUrl: './phone-list.template.html',
 })
diff --git a/public/docs/_examples/upgrade-phonecat-4-final/ts/systemjs.config.1.js b/public/docs/_examples/upgrade-phonecat-4-final/ts/systemjs.config.1.js
index afb510f0a1..c48bb7ca39 100644
--- a/public/docs/_examples/upgrade-phonecat-4-final/ts/systemjs.config.1.js
+++ b/public/docs/_examples/upgrade-phonecat-4-final/ts/systemjs.config.1.js
@@ -10,6 +10,7 @@
       'npm:': '/node_modules/'
     },
     map: {
+      'ng-loader': '../src/systemjs-angular-loader.js',
       app: '/app',
       // #enddocregion paths
       // angular bundles
@@ -35,7 +36,12 @@
     packages: {
       'app': {
         main: './main.js',
-        defaultExtension: 'js'
+        defaultExtension: 'js',
+        meta: {
+          './*.js': {
+            loader: 'ng-loader'
+          }
+        }
       },
       rxjs: {
         defaultExtension: 'js'
diff --git a/public/docs/_examples/user-input/ts/src/app/app.component.ts b/public/docs/_examples/user-input/ts/src/app/app.component.ts
index 56906ef048..5f885d5105 100644
--- a/public/docs/_examples/user-input/ts/src/app/app.component.ts
+++ b/public/docs/_examples/user-input/ts/src/app/app.component.ts
@@ -2,7 +2,6 @@
 import { Component }           from '@angular/core';
 
 @Component({
-  moduleId: module.id,
   selector: 'my-app',
   templateUrl: './app.component.html'
 })
diff --git a/public/docs/js/latest/cookbook/_data.json b/public/docs/js/latest/cookbook/_data.json
index 166fc94f39..b8bcbf545c 100644
--- a/public/docs/js/latest/cookbook/_data.json
+++ b/public/docs/js/latest/cookbook/_data.json
@@ -22,11 +22,6 @@
     "intro": "Share information between different directives and components"
   },
 
-  "component-relative-paths": {
-    "title": "Component-relative Paths",
-    "intro": "Use relative URLs for component templates and styles."
-  },
-
   "dependency-injection": {
     "title": "Dependency Injection",
     "intro": "Techniques for Dependency Injection"
diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
index 63382b3243..c1425ea05f 100644
--- a/public/docs/ts/latest/cookbook/_data.json
+++ b/public/docs/ts/latest/cookbook/_data.json
@@ -21,11 +21,6 @@
     "intro": "Share information between different directives and components"
   },
 
-  "component-relative-paths": {
-    "title": "Component-relative Paths",
-    "intro": "Use relative URLs for component templates and styles."
-  },
-
   "dependency-injection": {
     "title": "Dependency Injection",
     "intro": "Techniques for Dependency Injection"
diff --git a/public/docs/ts/latest/cookbook/aot-compiler.jade b/public/docs/ts/latest/cookbook/aot-compiler.jade
index fe8401f538..50c4ba8786 100644
--- a/public/docs/ts/latest/cookbook/aot-compiler.jade
+++ b/public/docs/ts/latest/cookbook/aot-compiler.jade
@@ -140,14 +140,6 @@ code-example(language="none" class="code-shell").
 
   While JIT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AOT compilation.
 
-  JIT-compiled applications that use the SystemJS loader and _component-relative_ URLs *must set the* `@Component.moduleId` *property to* `module.id`.
-  The `module` object is undefined when an AOT-compiled app runs.
-  The app fails with a null reference error unless you assign a global `module` value in the `index.html` like this:
-+makeExample('cb-aot-compiler/ts/src/index.html','moduleId')(format='.')
-.l-sub-section
-  :marked
-    Setting a global `module` is a temporary expedient.
-
 :marked
   ### Compiling the application
 
diff --git a/public/docs/ts/latest/cookbook/component-relative-paths.jade b/public/docs/ts/latest/cookbook/component-relative-paths.jade
deleted file mode 100644
index df9845c853..0000000000
--- a/public/docs/ts/latest/cookbook/component-relative-paths.jade
+++ /dev/null
@@ -1,147 +0,0 @@
-include ../_util-fns
-
-:marked
-  ## Write *Component-Relative* URLs to component templates and style files
-
-  Our components often refer to external template and style files.
-  We identify those files with a URL in the `templateUrl` and `styleUrls` properties of the `@Component` metadata
-  as seen here:
-  
-+makeExample('cb-component-relative-paths/ts/src/app/some.component.ts','absolute-config')(format='.')
-:marked
-  By default, we *must* specify the full path back to the application root.
-  We call this an ***absolute path*** because it is *absolute* with respect to the application root.
-
-  There are two problems with an *absolute path*:
-  
-  1. We have to remember the full path back to the application root.
-  
-  1. We have to update the URL when we move the component around in the application files structure.
-  
-  It would be much easier to write and maintain our application components if we could specify template and style locations
-  *relative* to their component class file.
-  
-  *We can!*
-  
-.alert.is-important
-  :marked
-    We can if we build our application as `commonjs` modules and load those modules
-    with a suitable package loader such as `systemjs` or `webpack`.
-    Learn why [below](#why-default).
-    
-    The Angular CLI uses these technologies and defaults to the
-    *component-relative path* approach described here.
-    CLI users can skip this chapter or read on to understand
-    how it works.
-  
-.l-main-section
-:marked
-  ## _Component-Relative_ Paths
-  
-  Our goal is to specify template and style URLs *relative* to their component class files, 
-  hence the term ***component-relative path***.
-  
-  The key to success is following a convention that puts related component files in well-known locations.
-  
-  We recommend keeping component template and component-specific style files as *siblings* of their
-  companion component class files. 
-  Here we see the three files for `SomeComponent` sitting next to each other in the `app` folder. 
-  
-.filetree
-  .file app
-    .children
-      .file some.component.css
-      .file some.component.html
-      .file some.component.ts
-    .file ...
-:marked
-  We'll have more files and folders &mdash; and greater folder depth &mdash; as our application grows.
-  We'll be fine as long as the component files travel together as the inseparable siblings they are.
-  
-  ### Set the *moduleId*
-  
-  Having adopted this file structure convention, we can specify locations of the template and style files
-  relative to the component class file simply by setting the `moduleId` property of the `@Component` metadata like this
-+makeExample('cb-component-relative-paths/ts/src/app/some.component.ts','module-id')(format='.')
-:marked
-  We strip the `src/app/` base path from the `templateUrl` and `styleUrls` and replace it with `./`. 
-  The result looks like this:
-+makeExample('cb-component-relative-paths/ts/src/app/some.component.ts','relative-config')(format='.')
-
-.alert.is-helpful
-  :marked
-    Webpack users may prefer [an alternative approach](#webpack).
-    
-.l-main-section
-:marked
-  ## Source
-  
-  **We can see the <live-example name="cb-component-relative-paths"></live-example>**
-  and download the source code from there
-  or simply read the pertinent source here.
-+makeTabs(
-  `cb-component-relative-paths/ts/src/app/some.component.ts,
-  cb-component-relative-paths/ts/src/app/some.component.html,
-  cb-component-relative-paths/ts/src/app/some.component.css,
-  cb-component-relative-paths/ts/src/app/app.component.ts`,
-  null,
-  `src/app/some.component.ts, src/app/some.component.html, src/app/some.component.css, src/app/app.component.ts`)
-
-a#why-default
-.l-main-section
-:marked
-  ## Appendix: why *component-relative* is not the default
-
-  A *component-relative* path is obviously superior to an *absolute* path.
-  Why did Angular default to the *absolute* path?
-  Why do *we* have to set the `moduleId`? Why can't Angular set it?
-  
-  First, let's look at what happens if we use a relative path and omit the `moduleId`.
-  
-  `EXCEPTION: Failed to load some.component.html`
-
-  Angular can't find the file so it throws an error.
-  
-  Why can't Angular calculate the template and style URLs from the component file's location? 
-
-  Because the location of the component can't be determined without the developer's help.
-  Angular apps can be loaded in many ways: from individual files, from SystemJS packages, or
-  from CommonJS packages, to name a few. 
-  We might generate modules in any of several formats. 
-  We might not be writing modular code at all!
-  
-  With this diversity of packaging and module load strategies, 
-  it's not possible for Angular to know with certainty where these files reside at runtime.
-
-  The only location Angular can be sure of is the URL of the `index.html` home page, the application root.
-  So by default it resolves template and style paths relative to the URL of `index.html`.
-  That's why we previously wrote our file URLs with an `app/` base path prefix.
-
-  But *if* we follow the recommended guidelines and we write modules in `commonjs` format
-  and we use a module loader that *plays nice*,
-  *then* we &mdash; the developers of the application &mdash;
-  know that the semi-global `module.id` variable is available and contains
-  the absolute URL of the component class module file.
-  
-  That knowledge enables us to tell Angular where the *component* file is
-  by setting the `moduleId`:
-+makeExample('cb-component-relative-paths/ts/src/app/some.component.ts','module-id')(format='.')
-
-a#webpack
-.l-main-section
-:marked
-  ## Webpack: load templates and styles
-  Webpack developers have an alternative to `moduleId`.
-
-  They can load templates and styles at runtime by adding `./` at the beginning of the `template` and `styles` / `styleUrls`
-  properties that reference *component-relative URLS.
-  
-+makeExample('webpack/ts/src/app/app.component.ts')(format='.')
-
-.l-sub-section
-  :marked
-    Webpack will do a `require` behind the scenes to load the templates and styles. Read more [here](../guide/webpack.html#highlights).
-
-
-:marked
-  See the [Introduction to Webpack](../guide/webpack.html).
diff --git a/public/docs/ts/latest/cookbook/ts-to-js.jade b/public/docs/ts/latest/cookbook/ts-to-js.jade
index bd89b29375..55c99cfe74 100644
--- a/public/docs/ts/latest/cookbook/ts-to-js.jade
+++ b/public/docs/ts/latest/cookbook/ts-to-js.jade
@@ -250,17 +250,6 @@ a#class-metadata
 
 :marked
   Note that both the _TypeScript_ and _ES6_ `templateUrl` properties identify the location of the template file _relative to the component module_.
-  All three metadata configurations specify the `moduleId` property 
-  so that Angular can calculate the proper module address.
-
-  The _ES5_ approach shown here does not support modules and therefore there is no way to calculate a _module-relative URL_.
-  The `templateUrl` for the _ES5_ code must specify the _path from the project root_ and 
-  omits the irrelevant `moduleId` property. 
-  
-.l-sub-section
-  :marked
-    With the right tooling, the `moduleId` may not be needed in the other JavaScript dialects either.
-    But it's safest to provide it anyway.
 
 a#dsl
 .l-main-section
diff --git a/public/docs/ts/latest/guide/architecture.jade b/public/docs/ts/latest/guide/architecture.jade
index fd4d1e9965..e6dabb52b2 100644
--- a/public/docs/ts/latest/guide/architecture.jade
+++ b/public/docs/ts/latest/guide/architecture.jade
@@ -252,11 +252,9 @@ block ts-decorator
     The `@Component` decorator takes a required configuration object with the
     information Angular needs to create and present the component and its view.
 
-    Here are a few of the possible `@Component` configuration options:
+    Here are a few of the most useful @Component configuration options:
 
 :marked
-  <ul if-docs="ts"><li>`moduleId`: sets the source of the base address (`module.id`) for module-relative URLs such as the `templateUrl`.</ul>
-
   - `selector`: CSS selector that tells Angular to create and insert an instance of this component
   where it finds a `<hero-list>` tag in *parent* HTML.
   For example, if an app's  HTML contains `<hero-list></hero-list>`, then
diff --git a/public/docs/ts/latest/guide/change-log.jade b/public/docs/ts/latest/guide/change-log.jade
index 60ca5240cf..c3dd7ca6ab 100644
--- a/public/docs/ts/latest/guide/change-log.jade
+++ b/public/docs/ts/latest/guide/change-log.jade
@@ -5,6 +5,13 @@ block includes
   The Angular documentation is a living document with continuous improvements.
   This log calls attention to recent significant changes.
 
+  ## All mention of moduleId removed. "Component relative paths" cookbook deleted (2017-03-13)
+  We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration.
+  This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.
+
+  We strongly encourage you to only write component-relative paths.
+  That is the only form of URL discussed in these docs. You no longer need to write @Component({ moduleId: module.id }), nor should you.
+
   ## NEW: Downloadable examples for each guide (2017-02-28)
   Now you can download the sample code for any guide and run it locally.
   Look for the new download links next to the "live example" links.
diff --git a/public/docs/ts/latest/guide/component-styles.jade b/public/docs/ts/latest/guide/component-styles.jade
index a113ea5fa9..bf608ae90e 100644
--- a/public/docs/ts/latest/guide/component-styles.jade
+++ b/public/docs/ts/latest/guide/component-styles.jade
@@ -302,10 +302,7 @@ code-example(format="nocode").
 
 block module-id
   :marked
-    You can change the way Angular calculates the full URL by setting the component metadata's `moduleId` property to `module.id`.
+    You can use a relative URL by prefixing your filenames with `./`:
 
   +makeExample('src/app/quest-summary.component.ts')
 
-  :marked
-    Learn more about `moduleId` in the [Component-Relative Paths](../cookbook/component-relative-paths.html) page.
-
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index 804f0d81fb..93102adcc7 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -130,7 +130,6 @@ figure.image-display
 
   - The code imports the Angular core library and the `Hero` model you just created.
   - The `@Component` selector value of "hero-form" means you can drop this form in a parent template with a `<hero-form>` tag.
-  - The `moduleId: module.id` property sets the base for module-relative loading of the `templateUrl`.
   - The `templateUrl` property points to a separate file for the template HTML.
   - You defined dummy data for `model` and `powers`, as befits a demo.
   Down the road, you can inject a data service to get and save real data
diff --git a/public/docs/ts/latest/guide/reactive-forms.jade b/public/docs/ts/latest/guide/reactive-forms.jade
index 1670a88124..00c2457ad3 100644
--- a/public/docs/ts/latest/guide/reactive-forms.jade
+++ b/public/docs/ts/latest/guide/reactive-forms.jade
@@ -176,10 +176,6 @@ a#create-component
 +makeExample('reactive-forms/ts/src/app/hero-detail.component.ts', 'metadata','src/app/hero-detail.component.ts (excerpt)')(format=".")
 
 :marked
-  The `moduleId: module.id` lets you use 
-  [component-relative paths](../cookbook/component-relative-paths.html) in file URLs 
-  such as when specifying the `templateUrl`.
-
   Next, create an exported `HeroDetailComponent` class with a `FormControl`. 
   `FormControl` is a directive that allows you to create and manage 
   a `FormControl` instance directly.
diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade
index 1cd291b675..74e51ae8bb 100644
--- a/public/docs/ts/latest/guide/style-guide.jade
+++ b/public/docs/ts/latest/guide/style-guide.jade
@@ -1681,7 +1681,7 @@ a(href="#toc") Back to top
 
 .s-rule.do
   :marked
-    **Do** specify _component-relative_ URLs, prefixed with `./`, and add `moduleId: module.id` to the component metadata.
+    **Do** specify _component-relative_ URLs, prefixed with `./`.
 
 .s-why
   :marked
@@ -1697,11 +1697,6 @@ a(href="#toc") Back to top
   :marked
     **Why?** A _component relative_ URL requires no change when you move the component files, as long as the files stay together.
 
-.s-why
-  :marked
-    **Why?** The JIT compiler requires the `moduleId` for relative URLs; the AOT compiler, 
-    which doesn't need it, safely ignores this property.
-
 .s-why.s-why-last
   :marked
     **Why?** The `./` prefix is standard syntax for relative URLs; don't depend on Angular's current ability to do without that prefix.
diff --git a/public/docs/ts/latest/index.jade b/public/docs/ts/latest/index.jade
index 763b4f3cbc..6930679b4a 100644
--- a/public/docs/ts/latest/index.jade
+++ b/public/docs/ts/latest/index.jade
@@ -45,8 +45,6 @@
       a(href="/docs/#{lang}/#{vers}/cookbook/ajs-quick-reference.html") AngularJS to Angular
     li
       a(href="/docs/#{lang}/#{vers}/cookbook/component-communication.html") Component Interaction
-    li
-      a(href="/docs/#{lang}/#{vers}/cookbook/component-relative-paths.html") Component-Relative Paths
     li
       a(href="/docs/#{lang}/#{vers}/cookbook/dependency-injection.html") Dependency Injection
     li
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index b2044cf0c5..ab6aa21da9 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -358,9 +358,6 @@ block redirect-vs-use-as-default
 
   Replace the `template` metadata with a `templateUrl` property that points to a new
   template file.
-+ifDocsFor('ts|js')
-  :marked
-    Set the `moduleId` property to `module.id` for module-relative loading of the `templateUrl`.
 
 +makeExcerpt('src/app/dashboard.component.ts', 'metadata')
 
@@ -597,7 +594,7 @@ block extract-id
 +makeExample('src/app/hero-detail.component.html')
 
 :marked
-  We update the component metadata with a <span if-docs="ts">`moduleId` and a </span>`templateUrl` pointing to the template file that we just created.
+  We update the component metadata with a `templateUrl` pointing to the template file that we just created.
 
 +makeExcerpt('src/app/hero-detail.component.ts', 'metadata')
 
@@ -759,7 +756,6 @@ figure.image-display
   1. *Cut-and-paste* the template contents into a new <span ngio-ex>heroes.component.html</span> file.
   1. *Cut-and-paste* the styles contents into a new <span ngio-ex>heroes.component.css</span> file.
   1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
-  <li if-docs="ts">. *Set* the `moduleId` property to `module.id` so that `templateUrl` and `styleUrls` are relative to the component.</li>
 
 .l-sub-section
   :marked
@@ -869,9 +865,7 @@ block css-files
 
 block style-urls
   :marked
-    First add `moduleId: module.id` to the `@Component` metadata of the `AppComponent`
-    to enable _module-relative_ file URLs.
-    Then add a `styleUrls` property that points to this CSS file as follows.
+    Add a `styleUrls` property that points to this CSS file as follows.
 
 +makeExcerpt('src/app/app.component.ts','styleUrls')
 
diff --git a/public/resources/live-examples/reactive-forms/ts/final-eplnkr.html b/public/resources/live-examples/reactive-forms/ts/final-eplnkr.html
deleted file mode 100644
index 217473733d..0000000000
--- a/public/resources/live-examples/reactive-forms/ts/final-eplnkr.html
+++ /dev/null
@@ -1,948 +0,0 @@
-<html lang="en"><head></head><body><form id="mainForm" method="post" action="https://embed.plnkr.co?show=preview" target="_self"><input type="hidden" name="entries[app/app.component.ts][content]" value="import { Component } from '@angular/core';
-
-@Component({
-  moduleId: module.id,
-  selector: 'my-app',
-  template: `
-  <div class=&quot;container&quot;>
-    <h1>Reactive Forms</h1>
-    <hero-list></hero-list>
-  </div>`
-})
-export class AppComponent { }
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="entries[app/app.component.ts][encoding]" value="utf8"><input type="hidden" name="entries[app/app.module.ts][content]" value="import { NgModule }            from '@angular/core';
-import { BrowserModule }       from '@angular/platform-browser';
-import { ReactiveFormsModule } from '@angular/forms';  // <-- #1 import module
-
-import { AppComponent }        from './app.component';
-import { HeroDetailComponent } from './hero-detail.component'; // <-- #1 import component
-import { HeroListComponent }   from './hero-list.component';
-
-import { HeroService }         from './hero.service'; //  <-- #1 import service
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    ReactiveFormsModule // <-- #2 add to Angular module imports
-  ],
-  declarations: [
-    AppComponent,
-    HeroDetailComponent, // <-- #3 declare app component
-    HeroListComponent
-  ],
-  providers: [ HeroService ], // <-- #4 provide HeroService
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="entries[app/app.module.ts][encoding]" value="utf8"><input type="hidden" name="entries[app/data-model.ts][content]" value="export class Hero {
-  id = 0;
-  name = '';
-  addresses: Address[];
-}
-
-export class Address {
-  street = '';
-  city   = '';
-  state  = '';
-  zip    = '';
-}
-
-export const heroes: Hero[] = [
-  {
-    id: 1,
-    name: 'Whirlwind',
-    addresses: [
-      {street: '123 Main',  city: 'Anywhere', state: 'CA',  zip: '94801'},
-      {street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'},
-    ]
-  },
-  {
-    id: 2,
-    name: 'Bombastic',
-    addresses: [
-      {street: '789 Elm',  city: 'Smallville', state: 'OH',  zip: '04501'},
-    ]
-  },
-  {
-    id: 3,
-    name: 'Magneta',
-    addresses: [ ]
-  },
-];
-
-export const states = ['CA', 'MD', 'OH', 'VA'];
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="entries[app/data-model.ts][encoding]" value="utf8"><input type="hidden" name="entries[app/demo.component.ts][content]" value="/* tslint:disable:member-ordering */
-import { Component } from '@angular/core';
-
-import { Hero }        from './data-model';
-import { HeroService } from './hero.service';
-
-@Component({
-  moduleId: module.id,
-  selector: 'my-app',
-  templateUrl: 'demo.component.html'
-})
-export class DemoComponent {
-
-  demos: string[] = [
-    'Simple FormControl',
-    'Simple FormBuilder group',
-    'Group with multiple controls',
-    'Nested FormBuilder group',
-    'PatchValue',
-    'SetValue',
-    'FormArray',
-    'Final'].map(n => n + ' Demo');
-
-  final = this.demos.length;
-  demo = this.final; // current demo
-
-  heroes: Hero[];
-  selectedHero: Hero;
-
-  constructor(private heroService: HeroService) { }
-
-  getHeroes() {
-    return this.heroService.getHeroes().then(heroes => this.heroes = heroes);
-  }
-
-  select(hero: Hero) { this.selectedHero = hero; }
-
-  selectDemo(demo: number) {
-    this.demo = demo + 1;
-    this.heroes = undefined;
-    this.selectedHero = undefined;
-    this.getHeroes();
-  }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="entries[app/demo.component.ts][encoding]" value="utf8"><input type="hidden" name="entries[app/demo.module.ts][content]" value="import { NgModule }             from '@angular/core';
-import { BrowserModule }        from '@angular/platform-browser';
-import { ReactiveFormsModule }  from '@angular/forms';  // <-- #1 import the module
-
-import { DemoComponent }        from './demo.component';
-import { components }           from './hero-detail-versions.component';
-import { HeroDetailComponent }  from './hero-detail.component';
-import { HeroListComponent }    from './hero-list.component';
-
-import { HeroService }          from './hero.service';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    ReactiveFormsModule
-  ],
-  declarations: [
-    DemoComponent, HeroDetailComponent, HeroListComponent,
-    ...components
-  ],
-  providers: [ HeroService ],
-  bootstrap: [ DemoComponent ]
-})
-export class DemoModule { }
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="entries[app/demo.module.ts][encoding]" value="utf8"><input type="hidden" name="entries[app/hero-detail-versions.component.ts][content]" value="/* tslint:disable:component-class-suffix */
-
-import { Component, Input, OnChanges } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { Address, Hero, states } from './data-model';
-
-//////// 1 ////////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-1',
-  templateUrl: './hero-detail-1.component.html'
-})
-
-export class HeroDetailComponent1 {
-  heroForm = new FormGroup ({
-    name: new FormControl()
-  });
-}
-
-//////// 2 ////////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-2',
-  templateUrl: './hero-detail-2.component.html'
-})
-export class HeroDetailComponent2 {
-  heroForm: FormGroup; // <--- heroForm is of type FormGroup
-  constructor(private fb: FormBuilder) { // <--- inject FormBuilder
-    this.heroForm = this.fb.group({ // <--- make this.form a FormBuilder group
-      name: '', // <--- the FormControl called &quot;name&quot;
-    });
-  }
-}
-
-//////// 3 ////////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-3',
-  templateUrl: './hero-detail-3.component.html'
-})
-export class HeroDetailComponent3 {
-  states = states;
-  heroForm: FormGroup;
-  constructor(private fb: FormBuilder) {
-    this.heroForm = this.fb.group({
-      name: '',
-      street: '',
-      city: '',
-      state: '',
-      zip: ''
-    });
-  }
-}
-
-////////// 4 /////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-4',
-  templateUrl: './hero-detail-4.component.html'
-})
-export class HeroDetailComponent4 {
-  states = states;
-  heroForm: FormGroup;
-  constructor(private fb: FormBuilder) {
-    this.heroForm = this.fb.group({ // <-- the parent FormGroup
-      name: '',
-      address: this.fb.group({ // <-- the child FormGroup
-        street: '',
-        city: '',
-        state: '',
-        zip: ''
-      })
-    });
-  }
-}
-
-////////// 5 ////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-5',
-  templateUrl: './hero-detail-4.component.html'
-})
-export class HeroDetailComponent5 implements OnChanges { // <-- implements OnChanges
-  @Input() hero: Hero;
-
-  states = states;
-  heroForm: FormGroup;
-  constructor(private fb: FormBuilder) {
-    this.heroForm = this.fb.group({
-      name: '',
-      address: this.fb.group({
-        street: '',
-        city: '',
-        state: '',
-        zip: ''
-      })
-    });
-  }
-
-  ngOnChanges() { // <-- wrap patchValue in ngOnChanges
-    this.heroForm.patchValue({
-      name: this.hero.name
-    });
-  }
-}
-
-
-///////// 6 ////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-6',
-  templateUrl: './hero-detail-4.component.html'
-})
-export class HeroDetailComponent6 implements OnChanges {
-  @Input() hero: Hero;
-
-  states = states;
-  heroForm: FormGroup;
-  constructor(private fb: FormBuilder) {
-    this.heroForm = this.fb.group({
-      name: '',
-      address: this.fb.group(new Address()) // <-- a FormGroup with a new address
-    });
-  }
-
-  ngOnChanges() {
-    this.heroForm.reset();
-    this.heroForm.setValue({
-      name:    this.hero.name,
-      address: this.hero.addresses[0] || new Address()
-    });
-  }
-
-}
-
-////////// 7 ////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-7',
-  templateUrl: './hero-detail-5.component.html'
-})
-export class HeroDetailComponent7 implements OnChanges {
-  @Input() hero: Hero;
-  states = states;
-  heroForm: FormGroup;
-  constructor(private fb: FormBuilder) {
-    this.heroForm = this.fb.group({
-      name: '',
-      secretLairs: this.fb.array([]) // <-- secretLairs as an empty FormArray
-    });
-  }
-
-  get secretLairs(): FormArray {
-    return this.heroForm.get('secretLairs') as FormArray;
-  };
-
-  ngOnChanges() {
-    this.heroForm.reset();
-    this.heroForm.patchValue({
-      name: this.hero.name
-    });
-    this.setAddresses(this.hero.addresses);
-  }
-  setAddresses(addresses: Address[]) {
-    const addressFGs = addresses.map(address => this.fb.group(address));
-    const addressFormArray = this.fb.array(addressFGs);
-    this.heroForm.setControl('secretLairs', addressFormArray);
-  }
-
-  addLair() {
-    this.secretLairs.push(this.fb.group(new Address()));
-  }
-}
-
-////////////////////////////////
-
-export const components = [
-  HeroDetailComponent1,
-  HeroDetailComponent2,
-  HeroDetailComponent3,
-  HeroDetailComponent4,
-  HeroDetailComponent5,
-  HeroDetailComponent6,
-  HeroDetailComponent7
-];
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="entries[app/hero-detail-versions.component.ts][encoding]" value="utf8"><input type="hidden" name="entries[app/hero-detail.component.ts][content]" value="// tslint:disable:no-unused-variable
-import { Component, EventEmitter, Input, Output, OnChanges } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { Address, Hero, states } from './data-model';
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail',
-  templateUrl: './hero-detail.component.html'
-})
-
-export class HeroDetailComponent implements OnChanges {
-  @Input() hero: Hero;
-  @Output() save = new EventEmitter<Hero>();
-
-  states = states;
-  heroForm: FormGroup;
-
-  constructor(private fb: FormBuilder) {
-    this.heroForm = this.fb.group({
-      name: '',
-      secretLairs: this.fb.array([])
-    });
-  }
-
-  get secretLairs(): FormArray {
-    return this.heroForm.get('secretLairs') as FormArray;
-  };
-
-  ngOnChanges() {
-    this.heroForm.reset();
-    this.heroForm.patchValue({
-      name: this.hero.name
-    });
-    this.setAddresses(this.hero.addresses);
-  }
-
-   setAddresses(addresses: Address[]) {
-    const addressFGs = addresses.map(address => this.fb.group(address));
-    const addressFormArray = this.fb.array(addressFGs);
-    this.heroForm.setControl('secretLairs', addressFormArray);
-  }
-
-  addLair() {
-    this.secretLairs.push(this.fb.group(new Address()));
-  }
-
-  onSubmit() {
-    const formModel = this.heroForm.value;
-
-    const newHero: Hero = {
-      id: this.hero.id,
-      name: formModel.name as string,
-      addresses: formModel.secretLairs
-    };
-
-    this.save.emit(newHero); // let parent decide what to do
-
-    console.log(newHero); // diagnostic
-  }
-
-  revert() { this.ngOnChanges(); }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="entries[app/hero-detail.component.ts][encoding]" value="utf8"><input type="hidden" name="entries[app/hero-list.component.ts][content]" value="import { Component, OnInit } from '@angular/core';
-
-import { Hero }        from './data-model';
-import { HeroService } from './hero.service';
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-list',
-  templateUrl: 'hero-list.component.html'
-})
-export class HeroListComponent implements OnInit {
-  heroes: Hero[];
-  selectedHero: Hero;
-
-  constructor(private heroService: HeroService) { }
-
-  ngOnInit() { this.getHeroes(); }
-
-  getHeroes() {
-    this.heroService.getHeroes()
-        .then(heroes => this.heroes = heroes);
-  }
-
-  select(hero: Hero) { this.selectedHero = hero; }
-
-  onSave(hero: Hero) {
-    this.heroService.updateHero(hero)
-        .then(() => {
-          this.getHeroes();
-          const newHero = this.heroes.find(h => h === hero);
-          this.select(newHero);
-        });
-  }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="entries[app/hero-list.component.ts][encoding]" value="utf8"><input type="hidden" name="entries[app/hero.service.ts][content]" value="import { Injectable } from '@angular/core';
-
-import { Hero, heroes } from './data-model';
-
-@Injectable()
-export class HeroService {
-
-  getHeroes(): Promise<Hero[]> {
-    return new Promise<Hero[]>(resolve => {
-      // simulate server latency with delay
-      setTimeout(() => resolve(heroes), 500);
-    });
-  }
-
-  updateHero(hero: Hero): Promise<Hero>  {
-    // Demo: faking server update; nothing can go wrong ;-)
-    return new Promise<Hero>(resolve => {
-      // simulate server latency with delay
-      const ix = heroes.findIndex(h => h.id === hero.id);
-      setTimeout(() => {
-        heroes[ix] = hero;
-        resolve(hero);
-      }, 500);
-    });
-  }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="entries[app/hero.service.ts][encoding]" value="utf8"><input type="hidden" name="entries[app/main-final.ts][content]" value="// tslint:disable:no-unused-variable
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="entries[app/main-final.ts][encoding]" value="utf8"><input type="hidden" name="entries[app/main.ts][content]" value="// tslint:disable:no-unused-variable
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }  from './app.module';  // just the final version
-import { DemoModule } from './demo.module'; // demo picker
-
-platformBrowserDynamic().bootstrapModule(DemoModule); // (AppModule);
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="entries[app/main.ts][encoding]" value="utf8"><input type="hidden" name="entries[styles.css][content]" value="/* Master Styles */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
-a {
-  cursor: pointer;
-  cursor: hand;
-}
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-
-/* Navigation link styles */
-nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #eee;
-  border-radius: 4px;
-}
-nav a:visited, a:link {
-  color: #607D8B;
-}
-nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
-}
-nav a.active {
-  color: #039be5;
-}
-
-/* items class */
-.items {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 24em;
-}
-.items li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.items li:hover {
-  color: #607D8B;
-  background-color: #DDD;
-  left: .1em;
-}
-.items li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.items li.selected:hover {
-  background-color: #BBD8DC;
-}
-.items .text {
-  position: relative;
-  top: -3px;
-}
-.items .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="entries[styles.css][encoding]" value="utf8"><input type="hidden" name="entries[app/demo.component.html][content]" value="<div class=&quot;container&quot;>
-<h1>Reactive Forms</h1>
-<h4><i>Pick a demo:</i>
-  <select [selectedIndex]=&quot;demo - 1&quot; (change)=&quot;selectDemo($event.target.selectedIndex)&quot;>
-    <option *ngFor=&quot;let demo of demos&quot;>{{demo}}</option>
-  </select>
-</h4>
-
-<hr>
-
-<div class=&quot;demo&quot;>
-  <hero-list *ngIf=&quot;demo===final&quot;></hero-list>
-
-  <hero-detail-1 *ngIf=&quot;demo===1&quot;></hero-detail-1>
-  <hero-detail-2 *ngIf=&quot;demo===2&quot;></hero-detail-2>
-  <hero-detail-3 *ngIf=&quot;demo===3&quot;></hero-detail-3>
-  <hero-detail-4 *ngIf=&quot;demo===4&quot;></hero-detail-4>
-
-  <div *ngIf=&quot;demo >= 5 &amp;&amp; demo !== final&quot; >
-
-    <p *ngIf=&quot;!heroes&quot;><b><i>Loading heroes ... </i></b></p>
-    <h3 *ngIf=&quot;heroes&quot;>Select a hero:</h3>
-
-    <nav>
-      <a *ngFor=&quot;let hero of heroes&quot; (click)=&quot;select(hero)&quot;>{{hero.name}}</a>
-    </nav>
-
-    <div *ngIf=&quot;selectedHero&quot;>
-      <hr>
-      <h2>Hero Detail</h2>
-      <h3>Editing: {{selectedHero.name}}</h3>
-      <hero-detail-5 [hero]=selectedHero *ngIf=&quot;demo===5&quot;></hero-detail-5>
-      <hero-detail-6 [hero]=selectedHero *ngIf=&quot;demo===6&quot;></hero-detail-6>
-      <hero-detail-7 [hero]=selectedHero *ngIf=&quot;demo===7&quot;></hero-detail-7>
-    </div>
-  </div>
-</div>
-</div>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="entries[app/demo.component.html][encoding]" value="utf8"><input type="hidden" name="entries[app/hero-detail-1.component.html][content]" value="<h2>Hero Detail</h2>
-<h3><i>A simple form with a single FormControl</i></h3>
-<form novalidate [formGroup]=&quot;heroForm&quot;>
-  <div class=&quot;form-group&quot;>
-    <label>Name:</label>
-    <input class=&quot;form-control&quot; formControlName=&quot;name&quot;>
-  </div>
-</form>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="entries[app/hero-detail-1.component.html][encoding]" value="utf8"><input type="hidden" name="entries[app/hero-detail-2.component.html][content]" value="<h2>Hero Detail</h2>
-<h3><i>A simple form with a single FormControl using FormBuilder</i></h3>
-<form novalidate [formGroup]=&quot;heroForm&quot;>
-  <div class=&quot;form-group&quot;>
-    <label>Name:</label>
-    <input class=&quot;form-control&quot; formControlName=&quot;name&quot;>
-  </div>
-</form>
-
-<p>Form: {{ heroForm.value | json }}</p>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="entries[app/hero-detail-2.component.html][encoding]" value="utf8"><input type="hidden" name="entries[app/hero-detail-3.component.html][content]" value="<h2>Hero Detail</h2>
-<h3><i>A simple form with multiple FormControls in a single FormBuilder group</i></h3>
-<form novalidate [formGroup]=&quot;heroForm&quot;>
-  <div class=&quot;form-group&quot;>
-    <label>Name:</label>
-    <input class=&quot;form-control&quot; formControlName=&quot;name&quot;>
-  </div>
-  <div class=&quot;form-group&quot;>
-    <label>Street:</label>
-    <input class=&quot;form-control&quot; formControlName=&quot;street&quot;>
-  </div>
-  <div class=&quot;form-group&quot;>
-    <label>City:</label>
-    <input class=&quot;form-control&quot; formControlName=&quot;city&quot;>
-  </div>
-  <div class=&quot;form-group&quot;>
-    <label>State:</label>
-    <select class=&quot;form-control&quot; formControlName=&quot;state&quot;>
-        <option *ngFor=&quot;let state of states&quot;>{{state}}</option>
-    </select>
-  </div>
-  <div class=&quot;form-group&quot;>
-    <label>Zip Code:</label>
-    <input class=&quot;form-control&quot; formControlName=&quot;zip&quot;>
-  </div>
-</form>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="entries[app/hero-detail-3.component.html][encoding]" value="utf8"><input type="hidden" name="entries[app/hero-detail-4.component.html][content]" value="<form novalidate [formGroup]=&quot;heroForm&quot;>
-    <div class=&quot;form-group&quot;>
-      <label>Name:</label>
-      <input class=&quot;form-control&quot; formControlName=&quot;name&quot;>
-    </div>
-    <div formGroupName=&quot;address&quot; class=&quot;well well-lg&quot;>
-      <h4>Secret Lair</h4>
-      <div class=&quot;form-group&quot;>
-        <label>Street:</label>
-        <input class=&quot;form-control&quot; formControlName=&quot;street&quot;>
-      </div>
-      <div class=&quot;form-group&quot;>
-        <label>City:</label>
-        <input class=&quot;form-control&quot; formControlName=&quot;city&quot;>
-      </div>
-      <div class=&quot;form-group&quot;>
-        <label>State:</label>
-        <select class=&quot;form-control&quot; formControlName=&quot;state&quot;>
-          <option *ngFor=&quot;let state of states&quot;>{{state}}</option>
-        </select>
-      </div>
-      <div class=&quot;form-group&quot;>
-        <label>Zip Code:</label>
-        <input class=&quot;form-control&quot; formControlName=&quot;zip&quot;>
-      </div>
-    </div>
-</form>
-
-<p>heroForm value: {{ heroForm.value | json}}</p>
-<h4>Extra info for the curious:</h4>
-<p>Name value: {{ heroForm.get('name').value }}</p>
-
-<p>Street value: {{ heroForm.get('address.street').value}}</p>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="entries[app/hero-detail-4.component.html][encoding]" value="utf8"><input type="hidden" name="entries[app/hero-detail-5.component.html][content]" value="<h3><i>Using FormArray to add groups</i></h3>
-
-<form novalidate [formGroup]=&quot;heroForm&quot; (ngSubmit)=&quot;onSubmit(heroForm)&quot;>
-    <p>Form Changed: {{ heroForm.dirty }}</p>
-
-    <div class=&quot;form-group&quot;>
-      <label>Name:</label>
-      <input class=&quot;form-control&quot; formControlName=&quot;name&quot;>
-    </div>
-    <div formArrayName=&quot;secretLairs&quot; class=&quot;well well-lg&quot;>
-      <div *ngFor=&quot;let address of secretLairs.controls; let i=index&quot; [formGroupName]=&quot;i&quot; >
-        <!-- The repeated address template -->
-        <h4>Address #{{i + 1}}</h4>
-        <div style=&quot;margin-left: 1em;&quot;>
-          <div class=&quot;form-group&quot;>
-            <label>Street:</label>
-            <input class=&quot;form-control&quot; formControlName=&quot;street&quot;>
-          </div>
-          <div class=&quot;form-group&quot;>
-            <label>City:</label>
-            <input class=&quot;form-control&quot; formControlName=&quot;city&quot;>
-          </div>
-          <div class=&quot;form-group&quot;>
-            <label>State:</label>
-            <select class=&quot;form-control&quot; formControlName=&quot;state&quot;>
-              <option *ngFor=&quot;let state of states&quot;>{{state}}</option>
-            </select>
-          </div>
-          <div class=&quot;form-group&quot;>
-            <label>Zip Code:</label>
-            <input class=&quot;form-control&quot; formControlName=&quot;zip&quot;>
-          </div>
-        </div>
-        <br>
-        <!-- End of the repeated address template -->
-      </div>
-      <button (click)=&quot;addLair()&quot;>Add a Secret Lair</button> <!-- add button -->
-    </div>
-</form>
-
-<p>heroForm value: {{ heroForm.value | json}}</p>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="entries[app/hero-detail-5.component.html][encoding]" value="utf8"><input type="hidden" name="entries[app/hero-detail.component.html][content]" value="<form novalidate [formGroup]=&quot;heroForm&quot; (ngSubmit)=&quot;onSubmit(heroForm)&quot;>
-  <div style=&quot;margin-bottom: 1em&quot;>
-    <button type=&quot;submit&quot;
-            [disabled]=&quot;!heroForm.dirty&quot; class=&quot;btn btn-success&quot;>Save</button> &amp;nbsp;
-    <button type=&quot;reset&quot; (click)=&quot;revert()&quot;
-            [disabled]=&quot;!heroForm.dirty&quot; class=&quot;btn btn-danger&quot;>Revert</button>
-  </div>
-
-  <div class=&quot;form-group&quot;>
-      <label>Name:</label>
-      <input class=&quot;form-control&quot; formControlName=&quot;name&quot;>
-  </div>
-
-  <div formArrayName=&quot;secretLairs&quot; class=&quot;well well-lg&quot;>
-    <div *ngFor=&quot;let address of secretLairs.controls; let i=index&quot; [formGroupName]=&quot;i&quot; >
-      <!-- The repeated address template -->
-      <h4>Address #{{i + 1}}</h4>
-      <div style=&quot;margin-left: 1em;&quot;>
-        <div class=&quot;form-group&quot;>
-          <label>Street:</label>
-          <input class=&quot;form-control&quot; formControlName=&quot;street&quot;>
-        </div>
-        <div class=&quot;form-group&quot;>
-          <label>City:</label>
-          <input class=&quot;form-control&quot; formControlName=&quot;city&quot;>
-        </div>
-        <div class=&quot;form-group&quot;>
-          <label>State:</label>
-          <select class=&quot;form-control&quot; formControlName=&quot;state&quot;>
-            <option *ngFor=&quot;let state of states&quot;>{{state}}</option>
-          </select>
-        </div>
-        <div class=&quot;form-group&quot;>
-          <label>Zip Code:</label>
-          <input class=&quot;form-control&quot; formControlName=&quot;zip&quot;>
-        </div>
-      </div>
-      <br>
-      <!-- End of the repeated address template -->
-    </div>
-    <button (click)=&quot;addLair()&quot;>Add a Secret Lair</button> <!-- add button -->
-  </div>
-</form>
-
-<p>heroForm value: {{ heroForm.value | json}}</p>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="entries[app/hero-detail.component.html][encoding]" value="utf8"><input type="hidden" name="entries[app/hero-list.component.html][content]" value="<p *ngIf=&quot;!heroes&quot;><b><i>Loading heroes ... </i></b></p>
-<h3 *ngIf=&quot;heroes&quot;>Select a hero:</h3>
-
-<nav>
-  <a *ngFor=&quot;let hero of heroes&quot; (click)=&quot;select(hero)&quot;>{{hero.name}}</a>
-</nav>
-
-<div *ngIf=&quot;selectedHero&quot;>
-  <hr>
-  <h2>Hero Detail</h2>
-  <h3>Editing: {{selectedHero.name}}</h3>
-  <hero-detail [hero]=&quot;selectedHero&quot; (save)=&quot;onSave($event)&quot;></hero-detail>
-</div>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="entries[app/hero-list.component.html][encoding]" value="utf8"><input type="hidden" name="entries[index.html][content]" value="<!DOCTYPE html>
-<html>
-  <head>
-    <title>Hero Form</title>
-    <meta charset=&quot;UTF-8&quot;>
-    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
-
-    <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
-    <link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css&quot;>
-
-    <!-- Polyfills for older browsers -->
-    <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
-
-    <script src=&quot;https://unpkg.com/zone.js@0.7.2?main=browser&quot;></script>
-    <script src=&quot;https://unpkg.com/reflect-metadata@0.1.8&quot;></script>
-    <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
-
-    <script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
-  </head>
-
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-
-</html>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="entries[index.html][encoding]" value="utf8"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="reactive"><input type="hidden" name="tags[3]" value="forms"><input type="hidden" name="title" value="Angular Example - Reactive Forms (final)"><input type="hidden" name="source[type]" value="Reactive Forms (final)"><input type="hidden" name="source[url]" value="https://angular.io"></form><script>document.getElementById("mainForm").submit();</script></body></html>
\ No newline at end of file
diff --git a/public/resources/live-examples/reactive-forms/ts/final-plnkr.html b/public/resources/live-examples/reactive-forms/ts/final-plnkr.html
deleted file mode 100644
index a9fe278c0a..0000000000
--- a/public/resources/live-examples/reactive-forms/ts/final-plnkr.html
+++ /dev/null
@@ -1,948 +0,0 @@
-<html lang="en"><head></head><body><form id="mainForm" method="post" action="http://plnkr.co/edit/?p=preview" target="_self"><input type="hidden" name="files[app/app.component.ts]" value="import { Component } from '@angular/core';
-
-@Component({
-  moduleId: module.id,
-  selector: 'my-app',
-  template: `
-  <div class=&quot;container&quot;>
-    <h1>Reactive Forms</h1>
-    <hero-list></hero-list>
-  </div>`
-})
-export class AppComponent { }
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/app.module.ts]" value="import { NgModule }            from '@angular/core';
-import { BrowserModule }       from '@angular/platform-browser';
-import { ReactiveFormsModule } from '@angular/forms';  // <-- #1 import module
-
-import { AppComponent }        from './app.component';
-import { HeroDetailComponent } from './hero-detail.component'; // <-- #1 import component
-import { HeroListComponent }   from './hero-list.component';
-
-import { HeroService }         from './hero.service'; //  <-- #1 import service
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    ReactiveFormsModule // <-- #2 add to Angular module imports
-  ],
-  declarations: [
-    AppComponent,
-    HeroDetailComponent, // <-- #3 declare app component
-    HeroListComponent
-  ],
-  providers: [ HeroService ], // <-- #4 provide HeroService
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/data-model.ts]" value="export class Hero {
-  id = 0;
-  name = '';
-  addresses: Address[];
-}
-
-export class Address {
-  street = '';
-  city   = '';
-  state  = '';
-  zip    = '';
-}
-
-export const heroes: Hero[] = [
-  {
-    id: 1,
-    name: 'Whirlwind',
-    addresses: [
-      {street: '123 Main',  city: 'Anywhere', state: 'CA',  zip: '94801'},
-      {street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'},
-    ]
-  },
-  {
-    id: 2,
-    name: 'Bombastic',
-    addresses: [
-      {street: '789 Elm',  city: 'Smallville', state: 'OH',  zip: '04501'},
-    ]
-  },
-  {
-    id: 3,
-    name: 'Magneta',
-    addresses: [ ]
-  },
-];
-
-export const states = ['CA', 'MD', 'OH', 'VA'];
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/demo.component.ts]" value="/* tslint:disable:member-ordering */
-import { Component } from '@angular/core';
-
-import { Hero }        from './data-model';
-import { HeroService } from './hero.service';
-
-@Component({
-  moduleId: module.id,
-  selector: 'my-app',
-  templateUrl: 'demo.component.html'
-})
-export class DemoComponent {
-
-  demos: string[] = [
-    'Simple FormControl',
-    'Simple FormBuilder group',
-    'Group with multiple controls',
-    'Nested FormBuilder group',
-    'PatchValue',
-    'SetValue',
-    'FormArray',
-    'Final'].map(n => n + ' Demo');
-
-  final = this.demos.length;
-  demo = this.final; // current demo
-
-  heroes: Hero[];
-  selectedHero: Hero;
-
-  constructor(private heroService: HeroService) { }
-
-  getHeroes() {
-    return this.heroService.getHeroes().then(heroes => this.heroes = heroes);
-  }
-
-  select(hero: Hero) { this.selectedHero = hero; }
-
-  selectDemo(demo: number) {
-    this.demo = demo + 1;
-    this.heroes = undefined;
-    this.selectedHero = undefined;
-    this.getHeroes();
-  }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/demo.module.ts]" value="import { NgModule }             from '@angular/core';
-import { BrowserModule }        from '@angular/platform-browser';
-import { ReactiveFormsModule }  from '@angular/forms';  // <-- #1 import the module
-
-import { DemoComponent }        from './demo.component';
-import { components }           from './hero-detail-versions.component';
-import { HeroDetailComponent }  from './hero-detail.component';
-import { HeroListComponent }    from './hero-list.component';
-
-import { HeroService }          from './hero.service';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    ReactiveFormsModule
-  ],
-  declarations: [
-    DemoComponent, HeroDetailComponent, HeroListComponent,
-    ...components
-  ],
-  providers: [ HeroService ],
-  bootstrap: [ DemoComponent ]
-})
-export class DemoModule { }
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/hero-detail-versions.component.ts]" value="/* tslint:disable:component-class-suffix */
-
-import { Component, Input, OnChanges } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { Address, Hero, states } from './data-model';
-
-//////// 1 ////////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-1',
-  templateUrl: './hero-detail-1.component.html'
-})
-
-export class HeroDetailComponent1 {
-  heroForm = new FormGroup ({
-    name: new FormControl()
-  });
-}
-
-//////// 2 ////////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-2',
-  templateUrl: './hero-detail-2.component.html'
-})
-export class HeroDetailComponent2 {
-  heroForm: FormGroup; // <--- heroForm is of type FormGroup
-  constructor(private fb: FormBuilder) { // <--- inject FormBuilder
-    this.heroForm = this.fb.group({ // <--- make this.form a FormBuilder group
-      name: '', // <--- the FormControl called &quot;name&quot;
-    });
-  }
-}
-
-//////// 3 ////////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-3',
-  templateUrl: './hero-detail-3.component.html'
-})
-export class HeroDetailComponent3 {
-  states = states;
-  heroForm: FormGroup;
-  constructor(private fb: FormBuilder) {
-    this.heroForm = this.fb.group({
-      name: '',
-      street: '',
-      city: '',
-      state: '',
-      zip: ''
-    });
-  }
-}
-
-////////// 4 /////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-4',
-  templateUrl: './hero-detail-4.component.html'
-})
-export class HeroDetailComponent4 {
-  states = states;
-  heroForm: FormGroup;
-  constructor(private fb: FormBuilder) {
-    this.heroForm = this.fb.group({ // <-- the parent FormGroup
-      name: '',
-      address: this.fb.group({ // <-- the child FormGroup
-        street: '',
-        city: '',
-        state: '',
-        zip: ''
-      })
-    });
-  }
-}
-
-////////// 5 ////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-5',
-  templateUrl: './hero-detail-4.component.html'
-})
-export class HeroDetailComponent5 implements OnChanges { // <-- implements OnChanges
-  @Input() hero: Hero;
-
-  states = states;
-  heroForm: FormGroup;
-  constructor(private fb: FormBuilder) {
-    this.heroForm = this.fb.group({
-      name: '',
-      address: this.fb.group({
-        street: '',
-        city: '',
-        state: '',
-        zip: ''
-      })
-    });
-  }
-
-  ngOnChanges() { // <-- wrap patchValue in ngOnChanges
-    this.heroForm.patchValue({
-      name: this.hero.name
-    });
-  }
-}
-
-
-///////// 6 ////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-6',
-  templateUrl: './hero-detail-4.component.html'
-})
-export class HeroDetailComponent6 implements OnChanges {
-  @Input() hero: Hero;
-
-  states = states;
-  heroForm: FormGroup;
-  constructor(private fb: FormBuilder) {
-    this.heroForm = this.fb.group({
-      name: '',
-      address: this.fb.group(new Address()) // <-- a FormGroup with a new address
-    });
-  }
-
-  ngOnChanges() {
-    this.heroForm.reset();
-    this.heroForm.setValue({
-      name:    this.hero.name,
-      address: this.hero.addresses[0] || new Address()
-    });
-  }
-
-}
-
-////////// 7 ////////////////////
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail-7',
-  templateUrl: './hero-detail-5.component.html'
-})
-export class HeroDetailComponent7 implements OnChanges {
-  @Input() hero: Hero;
-  states = states;
-  heroForm: FormGroup;
-  constructor(private fb: FormBuilder) {
-    this.heroForm = this.fb.group({
-      name: '',
-      secretLairs: this.fb.array([]) // <-- secretLairs as an empty FormArray
-    });
-  }
-
-  get secretLairs(): FormArray {
-    return this.heroForm.get('secretLairs') as FormArray;
-  };
-
-  ngOnChanges() {
-    this.heroForm.reset();
-    this.heroForm.patchValue({
-      name: this.hero.name
-    });
-    this.setAddresses(this.hero.addresses);
-  }
-  setAddresses(addresses: Address[]) {
-    const addressFGs = addresses.map(address => this.fb.group(address));
-    const addressFormArray = this.fb.array(addressFGs);
-    this.heroForm.setControl('secretLairs', addressFormArray);
-  }
-
-  addLair() {
-    this.secretLairs.push(this.fb.group(new Address()));
-  }
-}
-
-////////////////////////////////
-
-export const components = [
-  HeroDetailComponent1,
-  HeroDetailComponent2,
-  HeroDetailComponent3,
-  HeroDetailComponent4,
-  HeroDetailComponent5,
-  HeroDetailComponent6,
-  HeroDetailComponent7
-];
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/hero-detail.component.ts]" value="// tslint:disable:no-unused-variable
-import { Component, EventEmitter, Input, Output, OnChanges } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { Address, Hero, states } from './data-model';
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-detail',
-  templateUrl: './hero-detail.component.html'
-})
-
-export class HeroDetailComponent implements OnChanges {
-  @Input() hero: Hero;
-  @Output() save = new EventEmitter<Hero>();
-
-  states = states;
-  heroForm: FormGroup;
-
-  constructor(private fb: FormBuilder) {
-    this.heroForm = this.fb.group({
-      name: '',
-      secretLairs: this.fb.array([])
-    });
-  }
-
-  get secretLairs(): FormArray {
-    return this.heroForm.get('secretLairs') as FormArray;
-  };
-
-  ngOnChanges() {
-    this.heroForm.reset();
-    this.heroForm.patchValue({
-      name: this.hero.name
-    });
-    this.setAddresses(this.hero.addresses);
-  }
-
-   setAddresses(addresses: Address[]) {
-    const addressFGs = addresses.map(address => this.fb.group(address));
-    const addressFormArray = this.fb.array(addressFGs);
-    this.heroForm.setControl('secretLairs', addressFormArray);
-  }
-
-  addLair() {
-    this.secretLairs.push(this.fb.group(new Address()));
-  }
-
-  onSubmit() {
-    const formModel = this.heroForm.value;
-
-    const newHero: Hero = {
-      id: this.hero.id,
-      name: formModel.name as string,
-      addresses: formModel.secretLairs
-    };
-
-    this.save.emit(newHero); // let parent decide what to do
-
-    console.log(newHero); // diagnostic
-  }
-
-  revert() { this.ngOnChanges(); }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/hero-list.component.ts]" value="import { Component, OnInit } from '@angular/core';
-
-import { Hero }        from './data-model';
-import { HeroService } from './hero.service';
-
-@Component({
-  moduleId: module.id,
-  selector: 'hero-list',
-  templateUrl: 'hero-list.component.html'
-})
-export class HeroListComponent implements OnInit {
-  heroes: Hero[];
-  selectedHero: Hero;
-
-  constructor(private heroService: HeroService) { }
-
-  ngOnInit() { this.getHeroes(); }
-
-  getHeroes() {
-    this.heroService.getHeroes()
-        .then(heroes => this.heroes = heroes);
-  }
-
-  select(hero: Hero) { this.selectedHero = hero; }
-
-  onSave(hero: Hero) {
-    this.heroService.updateHero(hero)
-        .then(() => {
-          this.getHeroes();
-          const newHero = this.heroes.find(h => h === hero);
-          this.select(newHero);
-        });
-  }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/hero.service.ts]" value="import { Injectable } from '@angular/core';
-
-import { Hero, heroes } from './data-model';
-
-@Injectable()
-export class HeroService {
-
-  getHeroes(): Promise<Hero[]> {
-    return new Promise<Hero[]>(resolve => {
-      // simulate server latency with delay
-      setTimeout(() => resolve(heroes), 500);
-    });
-  }
-
-  updateHero(hero: Hero): Promise<Hero>  {
-    // Demo: faking server update; nothing can go wrong ;-)
-    return new Promise<Hero>(resolve => {
-      // simulate server latency with delay
-      const ix = heroes.findIndex(h => h.id === hero.id);
-      setTimeout(() => {
-        heroes[ix] = hero;
-        resolve(hero);
-      }, 500);
-    });
-  }
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/main-final.ts]" value="// tslint:disable:no-unused-variable
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/main.ts]" value="// tslint:disable:no-unused-variable
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }  from './app.module';  // just the final version
-import { DemoModule } from './demo.module'; // demo picker
-
-platformBrowserDynamic().bootstrapModule(DemoModule); // (AppModule);
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[styles.css]" value="/* Master Styles */
-h1 {
-  color: #369;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 250%;
-}
-h2, h3 {
-  color: #444;
-  font-family: Arial, Helvetica, sans-serif;
-  font-weight: lighter;
-}
-body {
-  margin: 2em;
-}
-body, input[text], button {
-  color: #888;
-  font-family: Cambria, Georgia;
-}
-a {
-  cursor: pointer;
-  cursor: hand;
-}
-button {
-  font-family: Arial;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-  cursor: hand;
-}
-button:hover {
-  background-color: #cfd8dc;
-}
-button:disabled {
-  background-color: #eee;
-  color: #aaa;
-  cursor: auto;
-}
-
-/* Navigation link styles */
-nav a {
-  padding: 5px 10px;
-  text-decoration: none;
-  margin-right: 10px;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #eee;
-  border-radius: 4px;
-}
-nav a:visited, a:link {
-  color: #607D8B;
-}
-nav a:hover {
-  color: #039be5;
-  background-color: #CFD8DC;
-}
-nav a.active {
-  color: #039be5;
-}
-
-/* items class */
-.items {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 24em;
-}
-.items li {
-  cursor: pointer;
-  position: relative;
-  left: 0;
-  background-color: #EEE;
-  margin: .5em;
-  padding: .3em 0;
-  height: 1.6em;
-  border-radius: 4px;
-}
-.items li:hover {
-  color: #607D8B;
-  background-color: #DDD;
-  left: .1em;
-}
-.items li.selected {
-  background-color: #CFD8DC;
-  color: white;
-}
-.items li.selected:hover {
-  background-color: #BBD8DC;
-}
-.items .text {
-  position: relative;
-  top: -3px;
-}
-.items .badge {
-  display: inline-block;
-  font-size: small;
-  color: white;
-  padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
-  line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  margin-right: .8em;
-  border-radius: 4px 0 0 4px;
-}
-/* everywhere else */
-* {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-
-/*
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
-*/"><input type="hidden" name="files[app/demo.component.html]" value="<div class=&quot;container&quot;>
-<h1>Reactive Forms</h1>
-<h4><i>Pick a demo:</i>
-  <select [selectedIndex]=&quot;demo - 1&quot; (change)=&quot;selectDemo($event.target.selectedIndex)&quot;>
-    <option *ngFor=&quot;let demo of demos&quot;>{{demo}}</option>
-  </select>
-</h4>
-
-<hr>
-
-<div class=&quot;demo&quot;>
-  <hero-list *ngIf=&quot;demo===final&quot;></hero-list>
-
-  <hero-detail-1 *ngIf=&quot;demo===1&quot;></hero-detail-1>
-  <hero-detail-2 *ngIf=&quot;demo===2&quot;></hero-detail-2>
-  <hero-detail-3 *ngIf=&quot;demo===3&quot;></hero-detail-3>
-  <hero-detail-4 *ngIf=&quot;demo===4&quot;></hero-detail-4>
-
-  <div *ngIf=&quot;demo >= 5 &amp;&amp; demo !== final&quot; >
-
-    <p *ngIf=&quot;!heroes&quot;><b><i>Loading heroes ... </i></b></p>
-    <h3 *ngIf=&quot;heroes&quot;>Select a hero:</h3>
-
-    <nav>
-      <a *ngFor=&quot;let hero of heroes&quot; (click)=&quot;select(hero)&quot;>{{hero.name}}</a>
-    </nav>
-
-    <div *ngIf=&quot;selectedHero&quot;>
-      <hr>
-      <h2>Hero Detail</h2>
-      <h3>Editing: {{selectedHero.name}}</h3>
-      <hero-detail-5 [hero]=selectedHero *ngIf=&quot;demo===5&quot;></hero-detail-5>
-      <hero-detail-6 [hero]=selectedHero *ngIf=&quot;demo===6&quot;></hero-detail-6>
-      <hero-detail-7 [hero]=selectedHero *ngIf=&quot;demo===7&quot;></hero-detail-7>
-    </div>
-  </div>
-</div>
-</div>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="files[app/hero-detail-1.component.html]" value="<h2>Hero Detail</h2>
-<h3><i>A simple form with a single FormControl</i></h3>
-<form novalidate [formGroup]=&quot;heroForm&quot;>
-  <div class=&quot;form-group&quot;>
-    <label>Name:</label>
-    <input class=&quot;form-control&quot; formControlName=&quot;name&quot;>
-  </div>
-</form>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="files[app/hero-detail-2.component.html]" value="<h2>Hero Detail</h2>
-<h3><i>A simple form with a single FormControl using FormBuilder</i></h3>
-<form novalidate [formGroup]=&quot;heroForm&quot;>
-  <div class=&quot;form-group&quot;>
-    <label>Name:</label>
-    <input class=&quot;form-control&quot; formControlName=&quot;name&quot;>
-  </div>
-</form>
-
-<p>Form: {{ heroForm.value | json }}</p>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="files[app/hero-detail-3.component.html]" value="<h2>Hero Detail</h2>
-<h3><i>A simple form with multiple FormControls in a single FormBuilder group</i></h3>
-<form novalidate [formGroup]=&quot;heroForm&quot;>
-  <div class=&quot;form-group&quot;>
-    <label>Name:</label>
-    <input class=&quot;form-control&quot; formControlName=&quot;name&quot;>
-  </div>
-  <div class=&quot;form-group&quot;>
-    <label>Street:</label>
-    <input class=&quot;form-control&quot; formControlName=&quot;street&quot;>
-  </div>
-  <div class=&quot;form-group&quot;>
-    <label>City:</label>
-    <input class=&quot;form-control&quot; formControlName=&quot;city&quot;>
-  </div>
-  <div class=&quot;form-group&quot;>
-    <label>State:</label>
-    <select class=&quot;form-control&quot; formControlName=&quot;state&quot;>
-        <option *ngFor=&quot;let state of states&quot;>{{state}}</option>
-    </select>
-  </div>
-  <div class=&quot;form-group&quot;>
-    <label>Zip Code:</label>
-    <input class=&quot;form-control&quot; formControlName=&quot;zip&quot;>
-  </div>
-</form>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="files[app/hero-detail-4.component.html]" value="<form novalidate [formGroup]=&quot;heroForm&quot;>
-    <div class=&quot;form-group&quot;>
-      <label>Name:</label>
-      <input class=&quot;form-control&quot; formControlName=&quot;name&quot;>
-    </div>
-    <div formGroupName=&quot;address&quot; class=&quot;well well-lg&quot;>
-      <h4>Secret Lair</h4>
-      <div class=&quot;form-group&quot;>
-        <label>Street:</label>
-        <input class=&quot;form-control&quot; formControlName=&quot;street&quot;>
-      </div>
-      <div class=&quot;form-group&quot;>
-        <label>City:</label>
-        <input class=&quot;form-control&quot; formControlName=&quot;city&quot;>
-      </div>
-      <div class=&quot;form-group&quot;>
-        <label>State:</label>
-        <select class=&quot;form-control&quot; formControlName=&quot;state&quot;>
-          <option *ngFor=&quot;let state of states&quot;>{{state}}</option>
-        </select>
-      </div>
-      <div class=&quot;form-group&quot;>
-        <label>Zip Code:</label>
-        <input class=&quot;form-control&quot; formControlName=&quot;zip&quot;>
-      </div>
-    </div>
-</form>
-
-<p>heroForm value: {{ heroForm.value | json}}</p>
-<h4>Extra info for the curious:</h4>
-<p>Name value: {{ heroForm.get('name').value }}</p>
-
-<p>Street value: {{ heroForm.get('address.street').value}}</p>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="files[app/hero-detail-5.component.html]" value="<h3><i>Using FormArray to add groups</i></h3>
-
-<form novalidate [formGroup]=&quot;heroForm&quot; (ngSubmit)=&quot;onSubmit(heroForm)&quot;>
-    <p>Form Changed: {{ heroForm.dirty }}</p>
-
-    <div class=&quot;form-group&quot;>
-      <label>Name:</label>
-      <input class=&quot;form-control&quot; formControlName=&quot;name&quot;>
-    </div>
-    <div formArrayName=&quot;secretLairs&quot; class=&quot;well well-lg&quot;>
-      <div *ngFor=&quot;let address of secretLairs.controls; let i=index&quot; [formGroupName]=&quot;i&quot; >
-        <!-- The repeated address template -->
-        <h4>Address #{{i + 1}}</h4>
-        <div style=&quot;margin-left: 1em;&quot;>
-          <div class=&quot;form-group&quot;>
-            <label>Street:</label>
-            <input class=&quot;form-control&quot; formControlName=&quot;street&quot;>
-          </div>
-          <div class=&quot;form-group&quot;>
-            <label>City:</label>
-            <input class=&quot;form-control&quot; formControlName=&quot;city&quot;>
-          </div>
-          <div class=&quot;form-group&quot;>
-            <label>State:</label>
-            <select class=&quot;form-control&quot; formControlName=&quot;state&quot;>
-              <option *ngFor=&quot;let state of states&quot;>{{state}}</option>
-            </select>
-          </div>
-          <div class=&quot;form-group&quot;>
-            <label>Zip Code:</label>
-            <input class=&quot;form-control&quot; formControlName=&quot;zip&quot;>
-          </div>
-        </div>
-        <br>
-        <!-- End of the repeated address template -->
-      </div>
-      <button (click)=&quot;addLair()&quot;>Add a Secret Lair</button> <!-- add button -->
-    </div>
-</form>
-
-<p>heroForm value: {{ heroForm.value | json}}</p>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="files[app/hero-detail.component.html]" value="<form novalidate [formGroup]=&quot;heroForm&quot; (ngSubmit)=&quot;onSubmit(heroForm)&quot;>
-  <div style=&quot;margin-bottom: 1em&quot;>
-    <button type=&quot;submit&quot;
-            [disabled]=&quot;!heroForm.dirty&quot; class=&quot;btn btn-success&quot;>Save</button> &amp;nbsp;
-    <button type=&quot;reset&quot; (click)=&quot;revert()&quot;
-            [disabled]=&quot;!heroForm.dirty&quot; class=&quot;btn btn-danger&quot;>Revert</button>
-  </div>
-
-  <div class=&quot;form-group&quot;>
-      <label>Name:</label>
-      <input class=&quot;form-control&quot; formControlName=&quot;name&quot;>
-  </div>
-
-  <div formArrayName=&quot;secretLairs&quot; class=&quot;well well-lg&quot;>
-    <div *ngFor=&quot;let address of secretLairs.controls; let i=index&quot; [formGroupName]=&quot;i&quot; >
-      <!-- The repeated address template -->
-      <h4>Address #{{i + 1}}</h4>
-      <div style=&quot;margin-left: 1em;&quot;>
-        <div class=&quot;form-group&quot;>
-          <label>Street:</label>
-          <input class=&quot;form-control&quot; formControlName=&quot;street&quot;>
-        </div>
-        <div class=&quot;form-group&quot;>
-          <label>City:</label>
-          <input class=&quot;form-control&quot; formControlName=&quot;city&quot;>
-        </div>
-        <div class=&quot;form-group&quot;>
-          <label>State:</label>
-          <select class=&quot;form-control&quot; formControlName=&quot;state&quot;>
-            <option *ngFor=&quot;let state of states&quot;>{{state}}</option>
-          </select>
-        </div>
-        <div class=&quot;form-group&quot;>
-          <label>Zip Code:</label>
-          <input class=&quot;form-control&quot; formControlName=&quot;zip&quot;>
-        </div>
-      </div>
-      <br>
-      <!-- End of the repeated address template -->
-    </div>
-    <button (click)=&quot;addLair()&quot;>Add a Secret Lair</button> <!-- add button -->
-  </div>
-</form>
-
-<p>heroForm value: {{ heroForm.value | json}}</p>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="files[app/hero-list.component.html]" value="<p *ngIf=&quot;!heroes&quot;><b><i>Loading heroes ... </i></b></p>
-<h3 *ngIf=&quot;heroes&quot;>Select a hero:</h3>
-
-<nav>
-  <a *ngFor=&quot;let hero of heroes&quot; (click)=&quot;select(hero)&quot;>{{hero.name}}</a>
-</nav>
-
-<div *ngIf=&quot;selectedHero&quot;>
-  <hr>
-  <h2>Hero Detail</h2>
-  <h3>Editing: {{selectedHero.name}}</h3>
-  <hero-detail [hero]=&quot;selectedHero&quot; (save)=&quot;onSave($event)&quot;></hero-detail>
-</div>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="files[index.html]" value="<!DOCTYPE html>
-<html>
-  <head>
-    <title>Hero Form</title>
-    <meta charset=&quot;UTF-8&quot;>
-    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;>
-
-    <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;>
-    <link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css&quot;>
-
-    <!-- Polyfills for older browsers -->
-    <script src=&quot;https://unpkg.com/core-js/client/shim.min.js&quot;></script>
-
-    <script src=&quot;https://unpkg.com/zone.js@0.7.2?main=browser&quot;></script>
-    <script src=&quot;https://unpkg.com/reflect-metadata@0.1.8&quot;></script>
-    <script src=&quot;https://unpkg.com/systemjs@0.19.39/dist/system.src.js&quot;></script>
-
-    <script src=&quot;https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js&quot;></script>
-    <script>
-      System.import('app').catch(function(err){ console.error(err); });
-    </script>
-  </head>
-
-  <body>
-    <my-app>Loading...</my-app>
-  </body>
-
-</html>
-
-
-<!-- 
-Copyright 2016 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->"><input type="hidden" name="tags[0]" value="angular"><input type="hidden" name="tags[1]" value="example"><input type="hidden" name="tags[2]" value="reactive"><input type="hidden" name="tags[3]" value="forms"><input type="hidden" name="private" value="true"><input type="hidden" name="description" value="Angular Example - Reactive Forms (final)"></form><script>document.getElementById("mainForm").submit();</script></body></html>
\ No newline at end of file
diff --git a/tools/plunker-builder/builder.js b/tools/plunker-builder/builder.js
index 9189cc0cf9..25aee5d969 100644
--- a/tools/plunker-builder/builder.js
+++ b/tools/plunker-builder/builder.js
@@ -43,6 +43,7 @@ class PlunkerBuilder {
     if (config.basePath.indexOf('/ts') > -1) {
       // uses systemjs.config.js so add plunker version
       this.options.addField(postData, 'systemjs.config.js', this.systemjsConfig);
+      this.options.addField(postData, 'systemjs-angular-loader.js', this.systemjsModulePlugin);
     }
   }
 
@@ -213,11 +214,13 @@ class PlunkerBuilder {
   }
 
   _getPlunkerFiles() {
+    var systemJsModulePlugin = '/_boilerplate/src/systemjs-angular-loader.js';
     var systemJsConfigPath = '/_boilerplate/src/systemjs.config.web.js';
     if (this.options.build) {
       systemJsConfigPath = '/_boilerplate/src/systemjs.config.web.build.js';
     }
     this.systemjsConfig = fs.readFileSync(this.basePath + systemJsConfigPath, 'utf-8');
+    this.systemjsModulePlugin = fs.readFileSync(this.basePath + systemJsModulePlugin, 'utf-8');
 
     // Copyright already added to web versions of systemjs.config
     // this.systemjsConfig +=  this.copyrights.jsCss;