diff --git a/.gitignore b/.gitignore
index 2666d27c27..df612cd56e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,7 @@ public/docs/xref-*.*
 _zip-output
 www*
 npm-debug*.log*
+**/debug.log
 *.plnkr.html
 plnkr.html
 *.eplnkr.html
diff --git a/.travis.yml b/.travis.yml
index 394e81297a..2e3b260e29 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -10,7 +10,7 @@ env:
     - DBUS_SESSION_BUS_ADDRESS=/dev/null
     - DISPLAY=:99.0
     - CHROME_BIN=chromium-browser
-    - LATEST_RELEASE=2.1.1
+    - LATEST_RELEASE=2.2.0
     - TASK_FLAGS="--dgeni-log=warn"
   matrix:
     - TASK=lint
diff --git a/gulpfile.js b/gulpfile.js
index 6dac9d40c4..765dd3e006 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -247,15 +247,16 @@ function findAndRunE2eTests(filter, outputFile) {
    e2eSpecPaths.forEach(function(specPath) {
     // get all of the examples under each dir where a pcFilename is found
     localExamplePaths = getExamplePaths(specPath, true);
-    // Filter by language
-    localExamplePaths = localExamplePaths.filter(function (fn) {
-      return fn.match('/'+lang+'$') != null;
-    });
+    // Filter by example name
     if (filter) {
       localExamplePaths = localExamplePaths.filter(function (fn) {
         return fn.match(filter) != null;
       })
     }
+    // Filter by language, also supports variations like js-es6
+    localExamplePaths = localExamplePaths.filter(function (fn) {
+      return fn.match('/'+lang+'(?:-[^/]*)?$') != null;
+    });
     localExamplePaths.forEach(function(examplePath) {
       examplePaths.push(examplePath);
     })
@@ -754,7 +755,7 @@ gulp.task('check-deploy', ['firebase-use-proj-check', 'build-docs'], () => {
   }).then(function(shouldDeploy) {
     if (shouldDeploy) {
       gutil.log('deploying...');
-      return execPromise(`firebase deploy -p ${WWW}`);
+      return execPromise('firebase deploy');
     } else {
       return ['Not deploying'];
     }
@@ -1270,7 +1271,7 @@ function apiExamplesWatch(postShredAction) {
 }
 
 function devGuideExamplesWatch(shredOptions, postShredAction, focus) {
-  var watchPattern = focus ? '**/{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
+  var watchPattern = focus ? '{' + focus + ',cb-' + focus+ '}/**/*.*' : '**/*.*';
   var includePattern = path.join(shredOptions.examplesDir, watchPattern);
   // removed this version because gulp.watch has the same glob issue that dgeni has.
   // var excludePattern = '!' + path.join(shredOptions.examplesDir, '**/node_modules/**/*.*');
diff --git a/harp.json b/harp.json
index ff594edf74..0dd8a50777 100644
--- a/harp.json
+++ b/harp.json
@@ -29,7 +29,7 @@
         "picture": "/resources/images/bios/naomi.jpg",
         "twitter": "naomitraveller",
         "website": "http://google.com/+NaomiBlack",
-        "bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She leads Angular Material and AngularDart, and acts as webmaster for angular.io. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.",
+        "bio": "Naomi is Angular's TPM generalist and jack-of-all-trades. She leads Angular's global programs (including localization), supports Angular's internal Google users, and acts as webmaster for angular.io and angular.cn. She's been at Google since 2006, as a technical program manager on projects ranging from Accessibility to Google Transit. She fights daleks in her spare time.",
         "type": "Lead"
       },
 
@@ -38,7 +38,7 @@
         "picture": "/resources/images/bios/brad-green.jpg",
         "twitter": "bradlygreen",
         "website": "https://plus.google.com/+BradGreen",
-        "bio": "Brad Green works at Google as an engineering director.  Brad manages the Google Sales Platform suite of projects as well as the AngularJS framework. Prior to Google, Brad worked on the early mobile web at AvantGo, founded and sold startups, and spent a few hard years toiling as a caterer. Brad's first job out of school was as lackey to Steve Jobs at NeXT Computer writing demo software and designing his slide presentations. Brad lives in Mountain View, CA with his wife and two children.",
+        "bio": "Brad Green works at Google as an engineering director. Brad manages the Google Sales Platform suite of projects as well as the AngularJS framework. Prior to Google, Brad worked on the early mobile web at AvantGo, founded and sold startups, and spent a few hard years toiling as a caterer. Brad's first job out of school was as lackey to Steve Jobs at NeXT Computer writing demo software and designing his slide presentations. Brad enjoys throwing dinner parties with his wife Heather and putting on plays with his children.",
         "type": "Lead"
       },
 
@@ -47,7 +47,7 @@
         "picture": "/resources/images/bios/juleskremer.jpg",
         "twitter": "jules_kremer",
         "website": "https://plus.google.com/+JulesKremer",
-        "bio": "Jules is a TPM on the Angular team.  When not working with developers, Jules is often bending into pretzel-like shapes, climbing mountains or drinking really awesome beer.",
+        "bio": "Jules is Head of Angular Developer Relations at Google.  When not working with developers, Jules is often bending into pretzel-like shapes, climbing mountains or drinking really awesome beer.",
         "type": "Lead"
       },
 
diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade
index 5da35ef23f..e2d9af4fac 100644
--- a/public/_includes/_footer.jade
+++ b/public/_includes/_footer.jade
@@ -20,7 +20,7 @@ div(class="main-footer" data-swiftype-index="false")
         // TODO: (ericjim) make a libraries page to showcase all angular libraries
         //li <a href="/libraries.html">Libraries</a>
         li <a href="/about/">About</a>
-        li <a href="/resources/">Books & Training</a>
+        li <a href="/resources/#Education">Books & Training</a>
         li <a href="/resources/">Tools & Libraries</a>
         li <a href="/resources/">Community</a>
         li <a href="/presskit.html">Press Kit</a>
diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore
index 52b370600f..3d007625ef 100644
--- a/public/docs/_examples/.gitignore
+++ b/public/docs/_examples/.gitignore
@@ -11,6 +11,7 @@ wallaby.js
 
 _test-output
 **/ts/**/*.js
+**/js-es6*/**/*.js
 **/ts-snippets/**/*.js
 *.d.ts
 
diff --git a/public/docs/_examples/_boilerplate/package.json b/public/docs/_examples/_boilerplate/package.json
index 3f255fcbd6..bcccdd978a 100644
--- a/public/docs/_examples/_boilerplate/package.json
+++ b/public/docs/_examples/_boilerplate/package.json
@@ -18,6 +18,7 @@
     "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
     "build:cli": "ng build",
     "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+    "build:babel": "babel app -d app --extensions \".es6\" --source-maps",
     "copy-dist-files": "node ./copy-dist-files.js",
     "i18n": "ng-xi18n"
   },
diff --git a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts b/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
index 5862beeebf..bc67bac8f0 100644
--- a/public/docs/_examples/cb-ts-to-js/e2e-spec.ts
+++ b/public/docs/_examples/cb-ts-to-js/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';
 
@@ -9,7 +9,7 @@ describe('TypeScript to Javascript tests', function () {
   });
 
   it('should display the basic component example', function () {
-    testTag('hero-view', 'Hero: Windstorm');
+    testTag('hero-view', 'Hero Detail: Windstorm');
   });
 
   it('should display the component example with lifecycle methods', function () {
@@ -36,7 +36,7 @@ describe('TypeScript to Javascript tests', function () {
 
   it('should support component with inputs and outputs', function () {
     let app = element(by.css('hero-io'));
-    let confirmComponent = app.element(by.css('my-confirm'));
+    let confirmComponent = app.element(by.css('app-confirm'));
 
     confirmComponent.element(by.buttonText('OK')).click();
     expect(app.element(by.cssContainingText('span', 'OK clicked')).isPresent()).toBe(true);
@@ -46,11 +46,11 @@ describe('TypeScript to Javascript tests', function () {
   });
 
   it('should support host bindings and host listeners', function() {
-    let app = element(by.css('heroes-bindings'));
+    let app = element(by.css('hero-host'));
     let h1 = app.element(by.css('h1'));
 
     expect(app.getAttribute('class')).toBe('heading');
-    expect(app.getAttribute('title')).toBe('Tooltip content');
+    expect(app.getAttribute('title')).toContain('Tooltip');
 
     h1.click();
     expect(h1.getAttribute('class')).toBe('active');
@@ -61,12 +61,12 @@ describe('TypeScript to Javascript tests', function () {
   });
 
   it('should support content and view queries', function() {
-    let app = element(by.css('heroes-queries'));
-    let windstorm = app.element(by.css('a-hero:first-child'));
+    let app = element(by.css('hero-queries'));
+    let windstorm = app.element(by.css('view-child:first-child'));
 
-    app.element(by.buttonText('Activate')).click();
+    app.element(by.css('button')).click();
     expect(windstorm.element(by.css('h2')).getAttribute('class')).toBe('active');
-    expect(windstorm.element(by.css('active-label')).getText()).toBe('Active');
+    expect(windstorm.element(by.css('content-child')).getText()).toBe('Active');
   });
 
   function testTag(selector: string, expectedText: string) {
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc
new file mode 100644
index 0000000000..3aaf507508
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "es2015",
+    "angular2"
+  ]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6
new file mode 100644
index 0000000000..e5f158dbed
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.es6
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: 'app.component.html',
+  styles: [
+    // See hero-di-inject-additional.component
+    'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
+    '.heading {font-style: italic}'
+  ]
+})
+export class AppComponent {
+  title = 'ES6 JavaScript with Decorators';
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html
new file mode 100644
index 0000000000..7f1efd31a0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.component.html
@@ -0,0 +1,31 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#io-metadata">Input and Output Decorators</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<hero-lifecycle></hero-lifecycle>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+<hero-host-meta></hero-host-meta>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata</h4>
+<hero-queries></hero-queries>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6
new file mode 100644
index 0000000000..bea55777ef
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/app.module.es6
@@ -0,0 +1,55 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroHostMetaComponent } from './hero-host-meta.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent,
+    ConfirmComponent,
+    HeroComponent,
+    HeroDIComponent,
+    HeroDIInjectComponent,
+    HeroDIInjectAdditionalComponent,
+    HeroHostComponent, HeroHostMetaComponent,
+    HeroIOComponent,
+    HeroLifecycleComponent,
+    HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+    HeroTitleComponent
+  ],
+  providers: [
+    DataService,
+    { provide: 'heroName', useValue: 'Windstorm' }
+  ],
+  bootstrap: [ AppComponent ],
+
+  // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
+})
+export class AppModule { }
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6
new file mode 100644
index 0000000000..08a0ed6c60
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.es6
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+// #docregion
+@Component({
+  moduleId: module.id,
+  selector: 'app-confirm',
+  templateUrl: 'confirm.component.html'
+})
+export class ConfirmComponent {
+  @Input() okMsg = '';
+  @Input('cancelMsg') notOkMsg = '';
+  @Output() ok = new EventEmitter();
+  @Output('cancel') notOk = new EventEmitter();
+
+  onOkClick() {
+    this.ok.emit(true);
+  }
+  onNotOkClick() {
+    this.notOk.emit(true);
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/confirm.component.html
@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
new file mode 100644
index 0000000000..cd7f9e1aae
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/data.service.es6
@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class DataService {
+  constructor() { }
+
+  getHeroName() {
+    return 'Windstorm';
+  }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
new file mode 100644
index 0000000000..ec460a9dbc
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject-additional.component.es6
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-di-inject-additional',
+  template: `<hero-title title="Tour of Heroes"></hero-title>`
+})
+export class HeroComponent { }
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
new file mode 100644
index 0000000000..94b42f956a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6
@@ -0,0 +1,13 @@
+import { Component, Inject } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-di-inject',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+export class HeroComponent {
+  constructor(@Inject('heroName') name) {
+    this.name = name;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
new file mode 100644
index 0000000000..0cc78d277e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6
@@ -0,0 +1,15 @@
+import { Component }   from '@angular/core';
+import { DataService } from './data.service';
+
+// #docregion
+@Component({
+  selector: 'hero-di',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+export class HeroComponent {
+  name = '';
+  constructor(dataService: DataService) {
+    this.name = dataService.getHeroName();
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
new file mode 100644
index 0000000000..25dbe1c21a
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host-meta',
+  template: `
+    <h1 [class.active]="active">Hero Host in Metadata</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  host: {
+    // HostBindings to the <hero-host-meta> element
+    '[title]': 'title',
+    '[class.heading]': 'headingClass',
+
+    // HostListeners on the entire <hero-host-meta> element
+    '(click)': 'clicked()',
+    '(mouseenter)': 'enter($event)',
+    '(mouseleave)': 'leave($event)'
+  },
+  // Styles within (but excluding) the <hero-host-meta> element
+  styles: ['.active {background-color: coral;}']
+})
+export class HeroHostMetaComponent {
+  title = 'Hero Host in Metadata Tooltip';
+  headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  clicked() {
+    this.clicks += 1;
+  }
+
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6
new file mode 100644
index 0000000000..e8d72233c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6
@@ -0,0 +1,39 @@
+import { Component, HostBinding, HostListener } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host',
+  template: `
+    <h1 [class.active]="active">Hero Host in Decorators</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  // Styles within (but excluding) the <hero-host> element
+  styles: ['.active {background-color: yellow;}']
+})
+export class HeroHostComponent {
+  // HostBindings to the <hero-host> element
+  @HostBinding() title = 'Hero Host in Decorators Tooltip';
+  @HostBinding('class.heading') headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  // HostListeners on the entire <hero-host> element
+  @HostListener('click')
+  clicked() {
+    this.clicks += 1;
+  }
+
+  @HostListener('mouseenter', ['$event'])
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  @HostListener('mouseleave', ['$event'])
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
new file mode 100644
index 0000000000..4b36411e78
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-io.component.es6
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-io',
+  template: `
+    <app-confirm [okMsg]="'OK'"
+                 [cancelMsg]="'Cancel'"
+                 (ok)="onOk()"
+                 (cancel)="onCancel()">
+    </app-confirm>
+    <span *ngIf="okClicked">OK clicked</span>
+    <span *ngIf="cancelClicked">Cancel clicked</span>
+  `
+})
+export class HeroIOComponent {
+  okClicked     = false;
+  cancelClicked = false;
+
+  onOk() {
+    this.okClicked = true;
+  }
+
+  onCancel() {
+    this.cancelClicked = true;
+  }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
new file mode 100644
index 0000000000..2539266597
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6
@@ -0,0 +1,14 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-lifecycle',
+  template: `<h1>Hero: {{name}}</h1>`
+})
+export class HeroComponent {
+  name = '';
+  ngOnInit() {
+    // todo: fetch from server async
+    setTimeout(() => this.name = 'Windstorm', 0);
+  }
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6
new file mode 100644
index 0000000000..fced43d4d7
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6
@@ -0,0 +1,81 @@
+import {
+  Component,
+  ContentChild,
+  Input,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+
+@Component({
+  selector: 'content-child',
+  template: `
+  <span class="content-child" *ngIf="active">
+    Active
+  </span>`
+})
+export class ContentChildComponent {
+  active = false;
+
+  activate() {
+    this.active = true;
+  }
+}
+
+////////////////////
+
+// #docregion content
+@Component({
+  selector: 'view-child',
+  template: `
+  <h2 [class.active]=active>
+    {{hero.name}}
+    <ng-content></ng-content>
+  </h2>`,
+  styles: ['.active {font-weight: bold; background-color: skyblue;}']
+})
+export class ViewChildComponent {
+  @Input() hero;
+  active = false;
+
+  @ContentChild(ContentChildComponent) content;
+
+  activate() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+}
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+@Component({
+  selector: 'hero-queries',
+  template: `
+    <view-child *ngFor="let hero of heroData" [hero]="hero">
+      <content-child></content-child>
+    </view-child>
+    <button (click)="activate()">{{buttonLabel}} All</button>
+  `
+})
+export class HeroQueriesComponent {
+  active = false;
+  heroData = [
+    {id: 1, name: 'Windstorm'},
+    {id: 2, name: 'LaughingGas'}
+  ];
+
+  @ViewChildren(ViewChildComponent) views;
+
+  activate() {
+    this.active = !this.active;
+    this.views.forEach(
+      view => view.activate()
+    );
+  }
+
+  get buttonLabel() {
+    return this.active ? 'Deactivate' : 'Activate';
+  }
+}
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6
new file mode 100644
index 0000000000..25460d34f7
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6
@@ -0,0 +1,26 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+// #docregion templateUrl
+@Component({
+  moduleId: module.id,
+  selector: 'hero-title',
+  templateUrl: 'hero-title.component.html'
+})
+// #enddocregion templateUrl
+export class HeroTitleComponent {
+  msg = '';
+  constructor(
+    @Inject('titlePrefix') @Optional() titlePrefix,
+    @Attribute('title') title
+  ) {
+    this.titlePrefix = titlePrefix;
+    this.title = title;
+  }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+// #enddocregion
+
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html
new file mode 100644
index 0000000000..0e93122d5c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero-title.component.html
@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
new file mode 100644
index 0000000000..4ea4c11611
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/hero.component.es6
@@ -0,0 +1,14 @@
+// #docregion metadata
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hero-view',
+  template: '<h1>{{title}}: {{getName()}}</h1>'
+})
+// #docregion appexport, class
+export class HeroComponent {
+  title = 'Hero Detail';
+  getName() {return 'Windstorm'; }
+}
+// #enddocregion appexport, class
+// #enddocregion metadata
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
new file mode 100644
index 0000000000..2470c9595e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/app/main.es6
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json
new file mode 100644
index 0000000000..391bd1a766
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/example-config.json
@@ -0,0 +1,4 @@
+{
+  "build": "build:babel",  
+  "run": "http-server:e2e" 
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
new file mode 100644
index 0000000000..1b9e3b5211
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
+
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+
+</html>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json
new file mode 100644
index 0000000000..5c7a5acd44
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6-decorators/plnkr.json
@@ -0,0 +1,8 @@
+{
+  "description": "TypeScript to JavaScript",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc b/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc
new file mode 100644
index 0000000000..3c078e9f99
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015"
+  ]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6
new file mode 100644
index 0000000000..9615b98a1f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.es6
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+export class AppComponent {
+  constructor() {
+    this.title = 'Plain ES6 JavaScript';
+  }
+}
+
+AppComponent.annotations = [
+  new Component({
+    moduleId: module.id,
+    selector: 'my-app',
+    templateUrl: 'app.component.html',
+    styles: [
+      // See hero-di-inject-additional.component
+      'hero-host { border: 1px dashed black; display: block; padding: 4px;}',
+      '.heading {font-style: italic}'
+    ]
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html
new file mode 100644
index 0000000000..8fbe65ade6
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.component.html
@@ -0,0 +1,30 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#io-metadata">Input and Output Metadata</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<hero-lifecycle></hero-lifecycle>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata</h4>
+<hero-queries></hero-queries>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6
new file mode 100644
index 0000000000..e8c7a8f9c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/app.module.es6
@@ -0,0 +1,56 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+export class AppModule { }
+
+AppModule.annotations = [
+  new NgModule({
+    imports: [ BrowserModule],
+    declarations: [
+      AppComponent,
+      ConfirmComponent,
+      HeroComponent,
+      HeroDIComponent,
+      HeroDIInjectComponent,
+      HeroDIInjectAdditionalComponent,
+      HeroHostComponent,
+      HeroIOComponent,
+      HeroLifecycleComponent,
+      HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+      HeroTitleComponent
+    ],
+    providers: [
+      DataService,
+      { provide: 'heroName', useValue: 'Windstorm' }
+    ],
+    bootstrap: [ AppComponent ],
+
+    // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging
+  })
+]
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6
new file mode 100644
index 0000000000..d42a553688
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.es6
@@ -0,0 +1,32 @@
+import { Component, EventEmitter } from '@angular/core';
+
+// #docregion
+export class ConfirmComponent {
+  constructor(){
+    this.ok    = new EventEmitter();
+    this.notOk = new EventEmitter();
+  }
+  onOkClick() {
+    this.ok.emit(true);
+  }
+  onNotOkClick() {
+    this.notOk.emit(true);
+  }
+}
+
+ConfirmComponent.annotations = [
+  new Component({
+    moduleId: module.id,
+    selector: 'app-confirm',
+    templateUrl: 'confirm.component.html',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ]
+  })
+];
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/confirm.component.html
@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6
new file mode 100644
index 0000000000..de023ce5a0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/data.service.es6
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+export class DataService {
+  constructor() {
+  }
+  getHeroName() {
+    return 'Windstorm';
+  }
+}
+
+DataService.annotations = [
+  new Injectable()
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
new file mode 100644
index 0000000000..5eb9bab815
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject-additional.component.es6
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+export class HeroComponent { }
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-di-inject-additional',
+    template: `<hero-title title="Tour of Heroes"></hero-title>`
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6
new file mode 100644
index 0000000000..2f95a0b981
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di-inject.component.es6
@@ -0,0 +1,20 @@
+import { Component, Inject } from '@angular/core';
+
+// #docregion
+export class HeroComponent {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-di-inject',
+    template: `<h1>Hero: {{name}}</h1>`
+  })
+];
+
+HeroComponent.parameters = [
+  [new Inject('heroName')]
+];
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
new file mode 100644
index 0000000000..dfbecf0707
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-di.component.es6
@@ -0,0 +1,22 @@
+import { Component }   from '@angular/core';
+import { DataService } from './data.service';
+
+// #docregion
+export class HeroComponent {
+  constructor(dataService) {
+    this.name = dataService.getHeroName();
+  }
+}
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-di',
+    template: `<h1>Hero: {{name}}</h1>`
+  })
+];
+
+HeroComponent.parameters = [
+  [DataService]
+];
+
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6
new file mode 100644
index 0000000000..092cd1a1ce
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-host.component.es6
@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+
+// #docregion
+export class HeroHostComponent {
+  constructor() {
+    this.active = false;
+    this.clicks = 0;
+    this.headingClass = true;
+    this.title = 'Hero Host Tooltip';
+  }
+
+  clicked() {
+    this.clicks += 1;
+  }
+
+  enter(event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  leave(event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+
+// #docregion metadata
+HeroHostComponent.annotations = [
+  new Component({
+    selector: 'hero-host',
+    template: `
+      <h1 [class.active]="active">Hero Host</h1>
+      <div>Heading clicks: {{clicks}}</div>
+    `,
+    host: {
+      // HostBindings to the <hero-host> element
+      '[title]': 'title',
+      '[class.heading]': 'headingClass',
+      '(click)': 'clicked()',
+
+      // HostListeners on the entire <hero-host> element
+      '(mouseenter)': 'enter($event)',
+      '(mouseleave)': 'leave($event)'
+    },
+    // Styles within (but excluding) the <hero-host> element
+    styles: ['.active {background-color: yellow;}']
+  })
+];
+// #docregion metadata
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
new file mode 100644
index 0000000000..0dc8c08f2d
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-io.component.es6
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+export class HeroIOComponent {
+  constructor() {
+    this.okClicked     = false;
+    this.cancelClicked = false;
+  }
+
+  onOk() {
+    this.okClicked = true;
+  }
+
+  onCancel() {
+    this.cancelClicked = true;
+  }
+}
+
+HeroIOComponent.annotations = [
+  new Component({
+    selector: 'hero-io',
+    template: `
+      <app-confirm [okMsg]="'OK'"
+                   [cancelMsg]="'Cancel'"
+                   (ok)="onOk()"
+                   (cancel)="onCancel()">
+      </app-confirm>
+      <span *ngIf="okClicked">OK clicked</span>
+      <span *ngIf="cancelClicked">Cancel clicked</span>
+    `
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6
new file mode 100644
index 0000000000..b394ff59aa
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6
@@ -0,0 +1,15 @@
+// #docregion
+import { Component } from '@angular/core';
+export class HeroComponent {
+  ngOnInit() {
+    // todo: fetch from server async
+    setTimeout(() => this.name = 'Windstorm', 0);
+  }
+}
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-lifecycle',
+    template: `<h1>Hero: {{name}}</h1>`
+  })
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6
new file mode 100644
index 0000000000..bf3b914406
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-queries.component.es6
@@ -0,0 +1,97 @@
+import {
+  Component,
+  ContentChild,
+  Input,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+
+export class ContentChildComponent {
+  constructor() {
+    this.active = false;
+  }
+
+  activate() {
+    this.active = !this.active;
+  }
+}
+
+ContentChildComponent.annotations = [
+  new Component({
+    selector: 'content-child',
+    template: `
+    <span class="content-child" *ngIf="active">
+      Active
+    </span>`
+  })
+];
+
+////////////////////
+
+// #docregion content
+export class ViewChildComponent {
+  constructor() {
+    this.active = false;
+  }
+
+  activate() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+}
+
+ViewChildComponent.annotations = [
+  new Component({
+    selector: 'view-child',
+    template: `<h2 [class.active]=active>
+      {{hero.name}}
+      <ng-content></ng-content>
+    </h2>`,
+    styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+    inputs: ['hero'],
+    queries: {
+      content: new ContentChild(ContentChildComponent)
+    }
+  })
+];
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+export class HeroQueriesComponent {
+  constructor(){
+    this.active = false;
+    this.heroData = [
+      {id: 1, name: 'Windstorm'},
+      {id: 2, name: 'LaughingGas'}
+    ];
+  }
+
+  activate() {
+    this.active = !this.active;
+    this.views.forEach(
+      view => view.activate()
+    );
+  }
+
+  get buttonLabel() {
+    return this.active ? 'Deactivate' : 'Activate';
+  }
+}
+
+HeroQueriesComponent.annotations = [
+  new Component({
+    selector: 'hero-queries',
+    template: `
+      <view-child *ngFor="let hero of heroData" [hero]="hero">
+        <content-child></content-child>
+      </view-child>
+      <button (click)="activate()">{{buttonLabel}} All</button>
+    `,
+    queries: {
+      views: new ViewChildren(ViewChildComponent)
+    }
+  })
+];
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6
new file mode 100644
index 0000000000..ff1e6ce026
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.es6
@@ -0,0 +1,29 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+export class HeroTitleComponent {
+  constructor(titlePrefix, title) {
+    this.titlePrefix = titlePrefix;
+    this.title  = title;
+    this.msg = '';
+  }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+
+// #docregion templateUrl
+HeroTitleComponent.annotations = [
+  new Component({
+    moduleId: module.id,
+    selector: 'hero-title',
+    templateUrl: 'hero-title.component.html'
+  })
+];
+// #enddocregion templateUrl
+
+HeroTitleComponent.parameters = [
+  [new Optional(), new Inject('titlePrefix')],
+  [new Attribute('title')]
+];
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html
new file mode 100644
index 0000000000..0e93122d5c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero-title.component.html
@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
new file mode 100644
index 0000000000..10b92c2878
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/hero.component.es6
@@ -0,0 +1,20 @@
+// #docplaster
+// #docregion metadata
+import { Component } from '@angular/core';
+
+// #docregion appexport, class
+export class HeroComponent {
+  constructor() {
+    this.title = 'Hero Detail';
+  }
+  getName() {return 'Windstorm'; }
+}
+// #enddocregion appexport, class
+
+HeroComponent.annotations = [
+  new Component({
+    selector: 'hero-view',
+    template: '<h1>{{title}}: {{getName()}}</h1>'
+  })
+];
+// #enddocregion metadata
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6 b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6
new file mode 100644
index 0000000000..2470c9595e
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/app/main.es6
@@ -0,0 +1,4 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json
new file mode 100644
index 0000000000..391bd1a766
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/example-config.json
@@ -0,0 +1,4 @@
+{
+  "build": "build:babel",  
+  "run": "http-server:e2e" 
+}
\ No newline at end of file
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/index.html b/public/docs/_examples/cb-ts-to-js/js-es6/index.html
new file mode 100644
index 0000000000..1b9e3b5211
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
+
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+
+</html>
diff --git a/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json
new file mode 100644
index 0000000000..5c7a5acd44
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js-es6/plnkr.json
@@ -0,0 +1,8 @@
+{
+  "description": "TypeScript to JavaScript",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js"
+  ],
+  "tags":["cookbook"]
+}
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.component.html b/public/docs/_examples/cb-ts-to-js/js/app/app.component.html
new file mode 100644
index 0000000000..6681d60672
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/app.component.html
@@ -0,0 +1,47 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#interfaces">Interfaces</a><br>
+<a href="#io-metadata">Input and Output Metadata</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<h4 id="class-metadata-dsl">Classes and Class Metadata (DSL)</h4>
+<hero-view-dsl></hero-view-dsl>
+
+<hr>
+<h4 id="interfaces">Interfaces</h4>
+<hero-lifecycle></hero-lifecycle>
+<h4 id="interfaces-dsl">Interfaces (DSL)</h4>
+<hero-lifecycle-dsl></hero-lifecycle-dsl>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+<h4 id="io-metadata-dsl">Input and Output Metadata (DSL)</h4>
+<hero-io-dsl></hero-io-dsl>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<h4 id="dependency-injection-dsl">Dependency Injection (DSL)</h4>
+<hero-di-dsl></hero-di-dsl>
+<hero-di-inject-dsl></hero-di-inject-dsl>
+<hero-di-inject-additional-dsl></hero-di-inject-additional-dsl>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+<h4 id="host-metadata-dsl">Host Metadata (DSL)</h4>
+<hero-host-dsl></hero-host-dsl>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata (DSL)</h4>
+<hero-queries></hero-queries>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.component.js b/public/docs/_examples/cb-ts-to-js/js/app/app.component.js
new file mode 100644
index 0000000000..9e8c5da535
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/app.component.js
@@ -0,0 +1,20 @@
+(function(app) {
+
+app.AppComponent = AppComponent;
+function AppComponent() {
+  this.title = 'ES5 JavaScript';
+}
+
+AppComponent.annotations = [
+  new ng.core.Component({
+    selector: 'my-app',
+    templateUrl: 'app/app.component.html',
+    styles: [
+      // See hero-di-inject-additional.component
+      'hero-host, hero-host-dsl { border: 1px dashed black; display: block; padding: 4px;}',
+      '.heading {font-style: italic}'
+    ]
+  })
+];
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/app.module.js b/public/docs/_examples/cb-ts-to-js/js/app/app.module.js
new file mode 100644
index 0000000000..3791fe16da
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/app.module.js
@@ -0,0 +1,46 @@
+(function(app) {
+
+app.AppModule = AppModule;
+function AppModule() { }
+
+AppModule.annotations = [
+  new ng.core.NgModule({
+    imports: [ ng.platformBrowser.BrowserModule ],
+    declarations: [
+      app.AppComponent,
+      app.ConfirmComponent, app.ConfirmDslComponent,
+      app.HeroComponent, app.HeroDslComponent,
+      app.HeroDIComponent, app.HeroDIDslComponent,
+      app.HeroDIInjectComponent, app.HeroDIInjectDslComponent,
+      app.HeroDIInjectAdditionalComponent, app.HeroDIInjectAdditionalDslComponent,
+      app.HeroHostComponent, app.HeroHostDslComponent,
+      app.HeroIOComponent, app.HeroIODslComponent,
+      app.HeroLifecycleComponent, app.HeroLifecycleDslComponent,
+      app.heroQueries.HeroQueriesComponent, app.heroQueries.ViewChildComponent, app.heroQueries.ContentChildComponent,
+      app.HeroTitleComponent, app.HeroTitleDslComponent
+    ],
+    providers: [
+      app.DataService,
+      { provide: 'heroName', useValue: 'Windstorm' }
+    ],
+    bootstrap: [ app.AppComponent ],
+
+    // schemas: [ ng.core.NO_ERRORS_SCHEMA ] // helpful for debugging!
+  })
+]
+
+})(window.app = window.app || {});
+
+
+///// For documentation only /////
+(function () {
+  // #docregion appimport
+  var HeroComponent = app.HeroComponent;
+  // #enddocregion appimport
+
+  // #docregion ng2import
+  var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
+  var LocationStrategy = ng.common.LocationStrategy;
+  var HashLocationStrategy = ng.common.HashLocationStrategy;
+  // #enddocregion ng2import
+})
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.html
@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
new file mode 100644
index 0000000000..4a4cd0a470
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/confirm.component.js
@@ -0,0 +1,73 @@
+(function(app) {
+
+// #docregion
+app.ConfirmComponent = ConfirmComponent;
+
+ConfirmComponent.annotations = [
+  new ng.core.Component({
+    selector: 'app-confirm',
+    templateUrl: 'app/confirm.component.html',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ]
+  })
+];
+
+function ConfirmComponent() {
+  this.ok    = new ng.core.EventEmitter();
+  this.notOk = new ng.core.EventEmitter();
+}
+
+ConfirmComponent.prototype.onOkClick = function() {
+  this.ok.emit(true);
+}
+
+ConfirmComponent.prototype.onNotOkClick = function() {
+  this.notOk.emit(true);
+}
+
+
+// #enddocregion
+
+})(window.app = window.app || {});
+
+/////// DSL version ////////
+
+(function(app) {
+
+// #docregion dsl
+app.ConfirmDslComponent = ng.core.Component({
+    selector: 'app-confirm-dsl',
+    templateUrl: 'app/confirm.component.html',
+    inputs: [
+      'okMsg',
+      'notOkMsg: cancelMsg'
+    ],
+    outputs: [
+      'ok',
+      'notOk: cancel'
+    ]
+  })
+  .Class({
+    constructor: function ConfirmDslComponent() {
+      this.ok    = new ng.core.EventEmitter();
+      this.notOk = new ng.core.EventEmitter();
+    },
+
+    onOkClick: function() {
+      this.ok.emit(true);
+    },
+
+    onNotOkClick: function() {
+      this.notOk.emit(true);
+    }
+  });
+
+// #enddocregion dsl
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/data.service.js b/public/docs/_examples/cb-ts-to-js/js/app/data.service.js
index c060e2b39d..643bb57dca 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/data.service.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/data.service.js
@@ -1,13 +1,10 @@
 (function(app) {
 
-  function DataService() {
-  }
-  DataService.annotations = [
-    new ng.core.Injectable()
-  ];
+  app.DataService = DataService;
+  function DataService() { }
+
   DataService.prototype.getHeroName = function() {
     return 'Windstorm';
   };
-  app.DataService = DataService;
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
index fa9684e7a1..1a88cfa355 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject-additional.component.js
@@ -1,50 +1,26 @@
 (function(app) {
 
-  // #docregion
-  var TitleComponent = ng.core.Component({
-    selector: 'hero-title',
-    template:
-      '<h1>{{titlePrefix}} {{title}}</h1>' +
-      '<button (click)="ok()">OK</button>' +
-      '<p>{{ msg }}</p>'
-  }).Class({
-    constructor: [
-      [
-        new ng.core.Optional(),
-        new ng.core.Inject('titlePrefix')
-      ],
-      new ng.core.Attribute('title'),
-      function(titlePrefix, title) {
-        this.titlePrefix = titlePrefix;
-        this.title  = title;
-        this.msg = '';
-      }
-    ],
-    ok: function() {
-      this.msg = 'OK!';
-    }
-  });
-  // #enddocregion
+app.HeroDIInjectAdditionalComponent = HeroDIInjectAdditionalComponent;
 
-  var AppComponent = ng.core.Component({
+HeroDIInjectAdditionalComponent.annotations = [
+  new ng.core.Component({
     selector: 'hero-di-inject-additional',
-    template: '<hero-title title="Tour of Heroes">' +
-    '</hero-title>'
-  }).Class({
-    constructor: function() { }
-  });
- 
-  app.HeroesDIInjectAdditionalModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [
-        AppComponent,
-        TitleComponent
-      ],
-      bootstrap: [ AppComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+    template: '<hero-title title="Tour of Heroes"></hero-title>'
+  })
+];
+
+function HeroDIInjectAdditionalComponent() {}
+
+})(window.app = window.app || {});
+
+////// DSL Version /////////
+(function(app) {
+
+app.HeroDIInjectAdditionalDslComponent = ng.core.Component({
+  selector: 'hero-di-inject-additional-dsl',
+  template: '<hero-title-dsl title="Tour of Heroes"></hero-title-dsl>'
+}).Class({
+  constructor: function HeroDIInjectAdditionalDslComponent() { }
+});
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
index dfda83e1f0..2e04c9246e 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inject.component.js
@@ -1,57 +1,41 @@
 (function(app) {
 
-// #docregion parameters
-  function HeroComponent(name) {
-    this.name = name;
-  }
-  HeroComponent.parameters = [
-    'heroName'
-  ];
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-di-inject',
-      template: '<h1>Hero: {{name}}</h1>'
-    })
-  ];
-// #enddocregion parameters
+// #docregion
+app.HeroDIInjectComponent = HeroDIInjectComponent;
 
-  app.HeroesDIInjectModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-  
-})(window.app = window.app || {});
-
-(function(app) {
-// #docregion ctor
-  var HeroComponent = ng.core.Component({
-    selector: 'hero-di-inline2',
+HeroDIInjectComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-di-inject',
     template: '<h1>Hero: {{name}}</h1>'
   })
-  .Class({
-    constructor:
-      [new ng.core.Inject('heroName'), 
-       function(name) {
-         this.name = name;
-       }]
-  });
-// #enddocregion ctor
+];
 
-  app.HeroesDIInjectModule2 =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      providers: [ { provide: 'heroName', useValue: 'Bombasto' } ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+HeroDIInjectComponent.parameters = [ 'heroName' ];
+
+function HeroDIInjectComponent(name) {
+  this.name = name;
+}
+// #enddocregion
+
+})(window.app = window.app || {});
+
+/////// DSL version ////////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroDIInjectDslComponent = ng.core.Component({
+  selector: 'hero-di-inject-dsl',
+  template: '<h1>Hero: {{name}}</h1>'
+})
+.Class({
+  constructor: [
+    new ng.core.Inject('heroName'),
+    function HeroDIInjectDslComponent(name) {
+      this.name = name;
+    }
+  ]
+});
+// #enddocregion dsl
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
deleted file mode 100644
index 1fe9c38cb1..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di-inline.component.js
+++ /dev/null
@@ -1,27 +0,0 @@
-(function(app) {
-  // #docregion
-  var HeroComponent = ng.core.Component({
-    selector: 'hero-di-inline',
-    template: '<h1>Hero: {{name}}</h1>'
-  })
-  .Class({
-    constructor:
-      [app.DataService, 
-       function(service) {
-         this.name = service.getHeroName();
-       }]
-  });
-  // #enddocregion
-
-  app.HeroDIInlineModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      providers: [ app.DataService ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-
-})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
index 55c576b836..c80efe193e 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-di.component.js
@@ -1,31 +1,43 @@
 (function(app) {
 
   // #docregion
-  app.HeroDIComponent = HeroComponent;
-  
-  function HeroComponent(dataService) {
-    this.name = dataService.getHeroName();
-  }
-  HeroComponent.parameters = [
-    app.DataService
-  ];
-  HeroComponent.annotations = [
+  app.HeroDIComponent = HeroDIComponent;
+
+  HeroDIComponent.annotations = [
     new ng.core.Component({
       selector: 'hero-di',
       template: '<h1>Hero: {{name}}</h1>'
     })
   ];
+
+  HeroDIComponent.parameters = [ app.DataService ];
+
+  function HeroDIComponent(dataService) {
+    this.name = dataService.getHeroName();
+  }
+
   // #enddocregion
 
-  app.HeroesDIModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      providers: [ app.DataService ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+
+})(window.app = window.app || {});
+
+////// DSL Version /////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroDIDslComponent = ng.core.Component({
+  selector: 'hero-di-dsl',
+  template: '<h1>Hero: {{name}}</h1>'
+})
+.Class({
+  constructor: [
+    app.DataService,
+    function HeroDIDslComponent(service) {
+      this.name = service.getHeroName();
+    }
+  ]
+});
+// #enddocregion dsl
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
deleted file mode 100644
index 5dd84733f3..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-dsl.component.js
+++ /dev/null
@@ -1,31 +0,0 @@
-// #docplaster
-// #docregion appexport
-(function(app) {
-
-  // #docregion component
-  var HeroComponent = ng.core.Component({
-      selector: 'hero-view-2',
-      template:
-        '<h1>Name: {{getName()}}</h1>',
-    })
-    .Class({
-      constructor: function() {
-      },
-      getName: function() {
-        return 'Windstorm';
-      }
-    });
-  // #enddocregion component
-
-  app.HeroesDslModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-
-})(window.app = window.app || {});
-// #enddocregion appexport
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
new file mode 100644
index 0000000000..0b04d5efae
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-host.component.js
@@ -0,0 +1,97 @@
+(function(app) {
+
+// #docregion
+app.HeroHostComponent = HeroHostComponent;
+
+HeroHostComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-host',
+    template:
+      '<h1 [class.active]="active">Hero Host</h1>' +
+      '<div>Heading clicks: {{clicks}}</div>',
+    host: {
+      // HostBindings to the <hero-host> element
+      '[title]': 'title',
+      '[class.heading]': 'headingClass',
+      '(click)': 'clicked()',
+
+      // HostListeners on the entire <hero-host> element
+      '(mouseenter)': 'enter($event)',
+      '(mouseleave)': 'leave($event)'
+    },
+    // Styles within (but excluding) the <hero-host> element
+    styles: ['.active {background-color: yellow;}']
+  })
+];
+
+function HeroHostComponent() {
+  this.clicks = 0;
+  this.headingClass = true;
+  this.title = 'Hero Host Tooltip content';
+}
+
+HeroHostComponent.prototype.clicked = function() {
+  this.clicks += 1;
+}
+
+HeroHostComponent.prototype.enter = function(event) {
+  this.active = true;
+  this.headingClass = false;
+}
+
+HeroHostComponent.prototype.leave = function(event) {
+  this.active = false;
+  this.headingClass = true;
+}
+// #enddocregion
+
+})(window.app = window.app || {});
+
+//// DSL Version ////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroHostDslComponent = ng.core.Component({
+  selector: 'hero-host-dsl',
+  template: `
+    <h1 [class.active]="active">Hero Host (DSL)</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  host: {
+    // HostBindings to the <hero-host-dsl> element
+    '[title]': 'title',
+    '[class.heading]': 'headingClass',
+    '(click)': 'clicked()',
+
+    // HostListeners on the entire <hero-host-dsl> element
+    '(mouseenter)': 'enter($event)',
+    '(mouseleave)': 'leave($event)'
+  },
+  // Styles within (but excluding) the <hero-host-dsl> element
+  styles: ['.active {background-color: coral;}']
+})
+.Class({
+  constructor: function HeroHostDslComponent() {
+    this.clicks = 0;
+    this.headingClass = true;
+    this.title = 'Hero Host Tooltip DSL content';
+  },
+
+  clicked() {
+    this.clicks += 1;
+  },
+
+  enter(event) {
+    this.active = true;
+    this.headingClass = false;
+  },
+
+  leave(event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+});
+// #enddocregion dsl
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html
new file mode 100644
index 0000000000..48c491be35
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io-dsl.component.html
@@ -0,0 +1,7 @@
+<app-confirm-dsl [okMsg]="'OK'"
+                 [cancelMsg]="'Cancel'"
+                 (ok)="onOk()"
+                 (cancel)="onCancel()">
+</app-confirm-dsl>
+<span *ngIf="okClicked">OK clicked</span>
+<span *ngIf="cancelClicked">Cancel clicked</span>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html
new file mode 100644
index 0000000000..e6eae2e804
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.html
@@ -0,0 +1,7 @@
+<app-confirm [okMsg]="'OK'"
+             [cancelMsg]="'Cancel'"
+             (ok)="onOk()"
+             (cancel)="onCancel()">
+</app-confirm>
+<span *ngIf="okClicked">OK clicked</span>
+<span *ngIf="cancelClicked">Cancel clicked</span>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
index 79aef12125..d35f3762da 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-io.component.js
@@ -1,68 +1,42 @@
 (function(app) {
-  // #docregion
-  var ConfirmComponent = ng.core.Component({
-    selector: 'my-confirm',
-    inputs: [
-      'okMsg',
-      'notOkMsg: cancelMsg'
-    ],
-    outputs: [
-      'ok',
-      'notOk: cancel'
-    ],
-    template:
-      '<button (click)="onOkClick()">' +
-        '{{okMsg}}' +
-      '</button>' +
-      '<button (click)="onNotOkClick()">' +
-        '{{notOkMsg}}' +
-      '</button>'
-  }).Class({
-    constructor: function() {
-      this.ok = new ng.core.EventEmitter();
-      this.notOk = new ng.core.EventEmitter();
-    },
-    onOkClick: function() {
-      this.ok.next(true);
-    },
-    onNotOkClick: function() {
-      this.notOk.next(true);
-    }
-  });
-  // #enddocregion
 
-  function AppComponent() {
-  }
-  AppComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-io',
-      template: '<my-confirm [okMsg]="\'OK\'"' +
-        '[cancelMsg]="\'Cancel\'"' +
-        '(ok)="onOk()"' +
-        '(cancel)="onCancel()">' +
-        '</my-confirm>' +
-        '<span *ngIf="okClicked">OK clicked</span>' +
-        '<span *ngIf="cancelClicked">Cancel clicked</span>'
-    })
-  ];
-  AppComponent.prototype.onOk = function() {
-    this.okClicked = true;
-  }
-  AppComponent.prototype.onCancel = function() {
-    this.cancelClicked = true;
-  }
+app.HeroIOComponent = HeroComponent;
 
-  app.HeroesIOModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [
-        AppComponent,
-        ConfirmComponent
-      ],
-      bootstrap: [ AppComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+HeroComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-io',
+    templateUrl: 'app/hero-io.component.html'
+  })
+];
+
+function HeroComponent() { }
+
+HeroComponent.prototype.onOk = function() {
+  this.okClicked = true;
+}
+
+HeroComponent.prototype.onCancel = function() {
+  this.cancelClicked = true;
+}
+
+})(window.app = window.app || {});
+
+///// DSL Version ////
+
+(function(app) {
+
+app.HeroIODslComponent = ng.core.Component({
+    selector: 'hero-io-dsl',
+    templateUrl: 'app/hero-io-dsl.component.html'
+  })
+  .Class({
+    constructor: function HeroIODslComponent() { },
+    onOk: function() {
+      this.okClicked = true;
+    },
+    onCancel: function() {
+      this.cancelClicked = true;
+    }
+  });
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
index 3e81c72e4e..94aa3514b2 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-lifecycle.component.js
@@ -1,29 +1,42 @@
 // #docplaster
 (function(app) {
-  // #docregion
-  function HeroComponent() {}
-  // #enddocregion
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-lifecycle',
-      template: '<h1>Hero: {{name}}</h1>'
-    })
-  ];
-  // #docregion
-  HeroComponent.prototype.ngOnInit =
-    function() {
-      this.name = 'Windstorm';
-    };
-  // #enddocregion
 
-  app.HeroesLifecycleModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+// #docregion
+app.HeroLifecycleComponent = HeroComponent;
+
+HeroComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-lifecycle',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+];
+
+function HeroComponent() { }
+
+HeroComponent.prototype.ngOnInit = function() {
+  // todo: fetch from server async
+  setTimeout(() => this.name = 'Windstorm', 0);
+};
+// #enddocregion
+
+})(window.app = window.app || {});
+
+/////// DSL version ////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroLifecycleDslComponent = ng.core.Component({
+    selector: 'hero-lifecycle-dsl',
+    template: '<h1>Hero: {{name}}</h1>'
+  })
+  .Class({
+    constructor: function HeroLifecycleDslComponent() { },
+    ngOnInit: function() {
+      // todo: fetch from server async
+      setTimeout(() => this.name = 'Windstorm', 0);
+    }
+  });
+// #enddocregion dsl
 
 })(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
new file mode 100644
index 0000000000..5e21cfcb0b
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-queries.component.js
@@ -0,0 +1,92 @@
+(function(app) {
+
+app.heroQueries = app.heroQueries || {};
+
+app.heroQueries.ContentChildComponent = ng.core.Component({
+  selector: 'content-child',
+  template:
+    '<span class="content-child" *ngIf="active">' +
+      'Active' +
+    '</span>'
+}).Class({
+  constructor: function ContentChildComponent() {
+    this.active = false;
+  },
+
+  activate: function() {
+    this.active = !this.active;
+  }
+});
+
+////////////////////
+
+// #docregion content
+app.heroQueries.ViewChildComponent = ng.core.Component({
+  selector: 'view-child',
+  template:
+    '<h2 [class.active]=active>' +
+      '{{hero.name}} ' +
+      '<ng-content></ng-content>' +
+    '</h2>',
+  styles: ['.active {font-weight: bold; background-color: skyblue;}'],
+  inputs: ['hero'],
+  queries: {
+    content: new ng.core.ContentChild(app.heroQueries.ContentChildComponent)
+  }
+})
+.Class({
+  constructor: function HeroQueriesHeroComponent() {
+    this.active = false;
+  },
+
+  activate: function() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+});
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+app.heroQueries.HeroQueriesComponent = ng.core.Component({
+  selector: 'hero-queries',
+  template:
+    '<view-child *ngFor="let hero of heroData" [hero]="hero">' +
+      '<content-child></content-child>' +
+    '</view-child>' +
+    '<button (click)="activate()">{{buttonLabel}} All</button>',
+  queries: {
+    views: new ng.core.ViewChildren(app.heroQueries.ViewChildComponent)
+  }
+})
+.Class({
+  constructor: function HeroQueriesComponent() {
+    this.active = false;
+    this.heroData = [
+      {id: 1, name: 'Windstorm'},
+      {id: 2, name: 'LaughingGas'}
+    ];
+  },
+
+  activate: function() {
+    this.active = !this.active;
+    this.views.forEach(function(view) {
+      view.activate();
+    });
+  },
+});
+
+// #docregion defined-property
+// add prototype property w/ getter outside the DSL
+var proto = app.heroQueries.HeroQueriesComponent.prototype;
+Object.defineProperty(proto, "buttonLabel", {
+    get: function () {
+        return this.active ? 'Deactivate' : 'Activate';
+    },
+    enumerable: true
+});
+// #enddocregion defined-property
+// #enddocregion view
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html
new file mode 100644
index 0000000000..0e93122d5c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.html
@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
new file mode 100644
index 0000000000..9a8ce7e578
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero-title.component.js
@@ -0,0 +1,60 @@
+(function(app) {
+
+// #docregion
+app.HeroTitleComponent = HeroTitleComponent;
+
+// #docregion templateUrl
+HeroTitleComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-title',
+    templateUrl: 'app/hero-title.component.html'
+  })
+];
+// #enddocregion templateUrl
+
+function HeroTitleComponent(titlePrefix, title) {
+    this.titlePrefix = titlePrefix;
+    this.title  = title;
+    this.msg = '';
+}
+
+HeroTitleComponent.prototype.ok = function() {
+  this.msg = 'OK!';
+}
+
+HeroTitleComponent.parameters = [
+  [new ng.core.Optional(), new ng.core.Inject('titlePrefix')],
+  [new ng.core.Attribute('title')]
+];
+
+// #enddocregion
+
+})(window.app = window.app || {});
+
+////////// DSL version ////////////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroTitleDslComponent = ng.core.Component({
+  selector: 'hero-title-dsl',
+  templateUrl: 'app/hero-title.component.html'
+})
+.Class({
+  constructor: [
+    [ new ng.core.Optional(), new ng.core.Inject('titlePrefix') ],
+    new ng.core.Attribute('title'),
+    function HeroTitleDslComponent(titlePrefix, title) {
+      this.titlePrefix = titlePrefix;
+      this.title  = title;
+      this.msg = '';
+    }
+  ],
+
+  ok: function() {
+    this.msg = 'OK!';
+  }
+});
+// #enddocregion dsl
+
+})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
index c6a58acc56..346d6f03d8 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/hero.component.js
@@ -1,42 +1,48 @@
 // #docplaster
-// #docregion appexport
 (function(app) {
-  // #enddocregion appexport
 
-  // #docregion metadata
-  // #docregion appexport
-  // #docregion constructorproto
-  function HeroComponent() {
-    this.title = "Hero Detail";
-  }
-  
-  // #enddocregion constructorproto
-  // #enddocregion appexport
-  HeroComponent.annotations = [
-    new ng.core.Component({
-      selector: 'hero-view',
-      template:
-        '<h1>Hero: {{getName()}}</h1>'
-    })
-  ];
-  // #docregion constructorproto
-  HeroComponent.prototype.getName =
-    function() {return 'Windstorm';};
-  // #enddocregion constructorproto
-  // #enddocregion metadata
+// #docregion
+// #docregion appexport
+// #docregion metadata
+app.HeroComponent = HeroComponent; // "export"
 
-  app.HeroesModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [ HeroComponent ],
-      bootstrap: [ HeroComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
+HeroComponent.annotations = [
+  new ng.core.Component({
+    selector: 'hero-view',
+    template: '<h1>{{title}}: {{getName()}}</h1>'
+  })
+];
 
-  // #docregion appexport
-  app.HeroComponent = HeroComponent;
+// #docregion constructorproto
+function HeroComponent() {
+  this.title = "Hero Detail";
+}
+
+HeroComponent.prototype.getName = function() { return 'Windstorm'; };
+// #enddocregion constructorproto
+
+// #enddocregion metadata
+// #enddocregion appexport
+// #enddocregion
+
+})(window.app = window.app || {});
+
+//////////// DSL version ///////////
+
+(function(app) {
+
+// #docregion dsl
+app.HeroDslComponent = ng.core.Component({
+    selector: 'hero-view-dsl',
+    template: '<h1>{{title}}: {{getName()}}</h1>',
+  })
+  .Class({
+    constructor: function HeroDslComponent() {
+      this.title = "Hero Detail";
+    },
+
+    getName: function() { return 'Windstorm'; }
+  });
+// #enddocregion dsl
 
 })(window.app = window.app || {});
-// #enddocregion appexport
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js b/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js
deleted file mode 100644
index 3a562d6912..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-bindings.component.js
+++ /dev/null
@@ -1,39 +0,0 @@
-(function(app) {
-
-  // #docregion
-  var HeroesComponent = ng.core.Component({
-    selector: 'heroes-bindings',
-    template: '<h1 [class.active]="active">' +
-      'Tour of Heroes' +
-    '</h1>',
-    host: {
-      '[title]': 'title',
-      '[class.heading]': 'hClass',
-      '(click)': 'clicked()',
-      '(dblclick)': 'doubleClicked($event)'
-    }
-  }).Class({
-    constructor: function() {
-      this.title = 'Tooltip content';
-      this.hClass = true;
-    },
-    clicked: function() {
-      this.active = !this.active;
-    },
-    doubleClicked: function(evt) {
-      this.active = true;
-    }
-  });
-  // #enddocregion
-
-  app.HeroesHostBindingsModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [ HeroesComponent ],
-      bootstrap: [ HeroesComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-
-})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js b/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
deleted file mode 100644
index f1bda77cb1..0000000000
--- a/public/docs/_examples/cb-ts-to-js/js/app/heroes-queries.component.js
+++ /dev/null
@@ -1,82 +0,0 @@
-(function(app) {
-
-  var ActiveLabelComponent = ng.core.Component({
-    selector: 'active-label',
-    template: '<span class="active-label"' +
-                    '*ngIf="active">' +
-      'Active' +
-    '</span>'
-  }).Class({
-    constructor: [function() { }],
-    activate: function() {
-      this.active = true;
-    }
-  });
-
-  // #docregion content
-  var HeroComponent = ng.core.Component({
-    selector: 'a-hero',
-    template: '<h2 [class.active]=active>' +
-      '{{hero.name}} ' +
-      '<ng-content></ng-content>' +
-    '</h2>',
-    inputs: ['hero'],
-    queries: {
-      label: new ng.core.ContentChild(
-                   ActiveLabelComponent)
-    }
-  }).Class({
-    constructor: [function() { }],
-    activate: function() {
-      this.active = true;
-      this.label.activate();
-    }
-  });
-  app.HeroQueriesComponent = HeroComponent;
-  // #enddocregion content
-
-  // #docregion view
-  var AppComponent = ng.core.Component({
-    selector: 'heroes-queries',
-    template:
-      '<a-hero *ngFor="let hero of heroData"' +
-            '[hero]="hero">' +
-        '<active-label></active-label>' +
-      '</a-hero>' +
-      '<button (click)="activate()">' +
-        'Activate' +
-      '</button>',    
-    queries: {
-      heroCmps: new ng.core.ViewChildren(
-                      HeroComponent)
-    }
-  }).Class({
-    constructor: function() {
-      this.heroData = [
-        {id: 1, name: 'Windstorm'},
-        {id: 2, name: 'Superman'}
-      ];
-    },
-    activate: function() {
-      this.heroCmps.forEach(function(cmp) {
-        cmp.activate();
-      });
-    }
-  });
-  // #enddocregion view
-
-  app.HeroesQueriesModule =
-    ng.core.NgModule({
-      imports: [ ng.platformBrowser.BrowserModule ],
-      declarations: [
-        AppComponent,
-        HeroComponent,
-        ActiveLabelComponent
-      ],
-      bootstrap: [ AppComponent ]
-    })
-    .Class({
-      constructor: function() {}
-    });
-
-})(window.app = window.app || {});
diff --git a/public/docs/_examples/cb-ts-to-js/js/app/main.js b/public/docs/_examples/cb-ts-to-js/js/app/main.js
index 9091452599..fd3e737c9e 100644
--- a/public/docs/_examples/cb-ts-to-js/js/app/main.js
+++ b/public/docs/_examples/cb-ts-to-js/js/app/main.js
@@ -1,35 +1,9 @@
-// #docplaster
-// #docregion appimport
 (function(app) {
-  // #enddocregion appimport
 
-  // #docregion ng2import
-  var platformBrowserDynamic =
-    ng.platformBrowserDynamic.platformBrowserDynamic;
-  var LocationStrategy =
-    ng.common.LocationStrategy;
-  var HashLocationStrategy =
-    ng.common.HashLocationStrategy;
-  // #enddocregion ng2import
+var platformBrowserDynamic = ng.platformBrowserDynamic.platformBrowserDynamic;
 
-  // #docregion appimport
-  var HeroComponent = app.HeroComponent;
-  // #enddocregion appimport
+document.addEventListener('DOMContentLoaded', function() {
+  platformBrowserDynamic().bootstrapModule(app.AppModule);
+});
 
-  document.addEventListener('DOMContentLoaded', function() {
-    platformBrowserDynamic().bootstrapModule(app.HeroesModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDslModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesLifecycleModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDIModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroDIInlineModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectModule2);
-    platformBrowserDynamic().bootstrapModule(app.HeroesDIInjectAdditionalModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesIOModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesHostBindingsModule);
-    platformBrowserDynamic().bootstrapModule(app.HeroesQueriesModule);
-  });
-
-  // #docregion appimport
 })(window.app = window.app || {});
-// #enddocregion appimport
diff --git a/public/docs/_examples/cb-ts-to-js/js/index.html b/public/docs/_examples/cb-ts-to-js/js/index.html
index 448c295609..7d2105bf78 100644
--- a/public/docs/_examples/cb-ts-to-js/js/index.html
+++ b/public/docs/_examples/cb-ts-to-js/js/index.html
@@ -4,64 +4,41 @@
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
 
     <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
 
+    <!-- Angular and RxJS umd scripts -->
     <script src="node_modules/rxjs/bundles/Rx.js"></script>
     <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
     <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
     <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
     <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
     <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
-    <script src="node_modules/@angular/router-deprecated/bundles/router-deprecated.umd.js"></script>
 
+    <!-- Application scripts -->
+    <script src="app/app.component.js"></script>
+    <script src="app/confirm.component.js"></script>
     <script src="app/data.service.js"></script>
     <script src="app/hero.component.js"></script>
-    <script src="app/hero-dsl.component.js"></script>
-    <script src="app/hero-lifecycle.component.js"></script>
     <script src="app/hero-io.component.js"></script>
     <script src="app/hero-di.component.js"></script>
-    <script src="app/hero-di-inline.component.js"></script>
     <script src="app/hero-di-inject.component.js"></script>
     <script src="app/hero-di-inject-additional.component.js"></script>
-    <script src="app/heroes-bindings.component.js"></script>
-    <script src="app/heroes-queries.component.js"></script>
+    <script src="app/hero-host.component.js"></script>
+    <script src="app/hero-lifecycle.component.js"></script>
+    <script src="app/hero-queries.component.js"></script>
+    <script src="app/hero-title.component.js"></script>
+
+    <script src="app/app.module.js"></script>
     <script src="app/main.js"></script>
   </head>
 
   <body>
-    <a id="toc"></a>
-    <h1>TypeScript to JavaScript</h1>
-    <a href="#class-metadata">Classes and Class Metadata</a><br>
-    <a href="#property-metadata">Input and Output Metadata</a><br>
-    <a href="#dependency-injection">Dependency Injection</a><br>
-    <a href="#other-property-metadata">Host and Query Metadata</a><br>
-
-    <hr>
-    <h4 id="class-metadata">Classes and Class Metadata</h4>
-    <hero-view>Loading hero-view...</hero-view>
-    <hero-view-2>Loading hero-view2...</hero-view-2>
-    <hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
-
-    <hr>
-    <h4 id="property-metadata">Input and Output Metadata</h4>
-    <hero-io>Loading hero-io...</hero-io>
-
-    <hr>
-    <h4 id="dependency-injection">Dependency Injection</h4>
-    <hero-di>Loading hero-di...</hero-di>
-    <hero-di-inline>Loading hero-di-inline...</hero-di-inline>
-    <hero-di-inline2>Loading hero-di-inline2...</hero-di-inline2>
-    <hero-di-inject>Loading hero-di-inject...</hero-di-inject>
-    <hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
-
-    <hr>
-    <h4 id="other-property-metadata">Host and Query Metadata</h4>
-    <heroes-bindings>Loading heroes-bindings...</heroes-bindings>
-    <heroes-queries>Loading heroes-queries...</heroes-queries>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html
new file mode 100644
index 0000000000..7f1efd31a0
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.html
@@ -0,0 +1,31 @@
+<a id="toc"></a>
+<h1>{{title}}</h1>
+<a href="#class-metadata">Classes and Class Metadata</a><br>
+<a href="#io-metadata">Input and Output Decorators</a><br>
+<a href="#dependency-injection">Dependency Injection</a><br>
+<a href="#host-metadata">Host Metadata</a><br>
+<a href="#view-child-metadata">View and Child Metadata</a><br>
+
+<hr>
+<h4 id="class-metadata">Classes and Class Metadata</h4>
+<hero-view></hero-view>
+<hero-lifecycle></hero-lifecycle>
+
+<hr>
+<h4 id="io-metadata">Input and Output Metadata</h4>
+<hero-io></hero-io>
+
+<hr>
+<h4 id="dependency-injection">Dependency Injection</h4>
+<hero-di></hero-di>
+<hero-di-inject></hero-di-inject>
+<hero-di-inject-additional></hero-di-inject-additional>
+
+<hr>
+<h4 id="host-metadata">Host Metadata</h4>
+<hero-host></hero-host>
+<hero-host-meta></hero-host-meta>
+
+<hr>
+<h4 id="view-child-metadata">View and Child Metadata</h4>
+<hero-queries></hero-queries>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts
new file mode 100644
index 0000000000..722d812f63
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'my-app',
+  templateUrl: 'app.component.html',
+  styles: [
+    // See hero-di-inject-additional.component
+    'hero-host, hero-host-meta { border: 1px dashed black; display: block; padding: 4px;}',
+    '.heading {font-style: italic}'
+  ]
+})
+export class AppComponent {
+  title = 'TypeScript';
+}
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts b/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts
new file mode 100644
index 0000000000..8aafe9c9bb
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/app.module.ts
@@ -0,0 +1,56 @@
+/* tslint:disable-next-line:no-unused-variable */
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ConfirmComponent } from './confirm.component';
+// #docregion appimport
+import { HeroComponent } from './hero.component';
+// #enddocregion appimport
+import { HeroComponent as HeroDIComponent } from './hero-di.component';
+import { HeroComponent as HeroDIInjectComponent } from './hero-di-inject.component';
+import { HeroComponent as HeroDIInjectAdditionalComponent } from './hero-di-inject-additional.component';
+import { HeroHostComponent } from './hero-host.component';
+import { HeroHostMetaComponent } from './hero-host-meta.component';
+import { HeroIOComponent } from './hero-io.component';
+import { HeroComponent as HeroLifecycleComponent } from './hero-lifecycle.component';
+import { HeroQueriesComponent, ViewChildComponent, ContentChildComponent } from './hero-queries.component';
+import { HeroTitleComponent } from './hero-title.component';
+
+import { DataService } from './data.service';
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent,
+    ConfirmComponent,
+    HeroComponent,
+    HeroDIComponent,
+    HeroDIInjectComponent,
+    HeroDIInjectAdditionalComponent,
+    HeroHostComponent, HeroHostMetaComponent,
+    HeroIOComponent,
+    HeroLifecycleComponent,
+    HeroQueriesComponent, ViewChildComponent, ContentChildComponent,
+    HeroTitleComponent
+  ],
+  providers: [
+    DataService,
+    { provide: 'heroName', useValue: 'Windstorm' }
+  ],
+  bootstrap: [ AppComponent ],
+
+  // schemas: [ NO_ERRORS_SCHEMA ] // helpful for debugging!
+})
+export class AppModule { }
+
+/* tslint:disable no-unused-variable */
+// #docregion ng2import
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {
+  LocationStrategy,
+  HashLocationStrategy
+} from '@angular/common';
+// #enddocregion ng2import
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html
new file mode 100644
index 0000000000..917bd1696f
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.html
@@ -0,0 +1,6 @@
+<button (click)="onOkClick()">
+  {{okMsg}}
+</button>
+<button (click)="onNotOkClick()">
+  {{notOkMsg}}
+</button>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts
new file mode 100644
index 0000000000..08a0ed6c60
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/confirm.component.ts
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+// #docregion
+@Component({
+  moduleId: module.id,
+  selector: 'app-confirm',
+  templateUrl: 'confirm.component.html'
+})
+export class ConfirmComponent {
+  @Input() okMsg = '';
+  @Input('cancelMsg') notOkMsg = '';
+  @Output() ok = new EventEmitter();
+  @Output('cancel') notOk = new EventEmitter();
+
+  onOkClick() {
+    this.ok.emit(true);
+  }
+  onNotOkClick() {
+    this.notOk.emit(true);
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts
index 7e9c7456c6..cd7f9e1aae 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/data.service.ts
@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
 
 @Injectable()
 export class DataService {
-  constructor() {
-  }
+  constructor() { }
+
   getHeroName() {
     return 'Windstorm';
   }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
index 146c6cbd83..ec460a9dbc 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts
@@ -1,50 +1,7 @@
-import {
-  Attribute,
-  Component,
-  Inject,
-  Optional,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-@Component({
-  selector: 'hero-title',
-  template: `
-    <h1>{{titlePrefix}} {{title}}</h1>
-    <button (click)="ok()">OK</button>
-    <p>{{ msg }}</p>
-  `
-})
-class TitleComponent {
-  private msg: string = '';
-  constructor(
-    @Inject('titlePrefix')
-    @Optional()
-      private titlePrefix: string,
-    @Attribute('title')
-      private title: string) {
-  }
-
-  ok() {
-    this.msg = 'OK!';
-  }
-}
-// #enddocregion
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-di-inject-additional',
-  template: `<hero-title title="Tour of Heroes">
-  </hero-title>`
+  template: `<hero-title title="Tour of Heroes"></hero-title>`
 })
-class AppComponent { }
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [
-    AppComponent,
-    TitleComponent
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class HeroesDIInjectAdditionalModule { }
+export class HeroComponent { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
index 7dc2bc84a2..c583a1b0f6 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di-inject.component.ts
@@ -1,23 +1,11 @@
-import { Component, Inject, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { Component, Inject } from '@angular/core';
 
 // #docregion
 @Component({
   selector: 'hero-di-inject',
   template: `<h1>Hero: {{name}}</h1>`
 })
-class HeroComponent {
-  constructor(
-    @Inject('heroName')
-      private name: string) {
-  }
+export class HeroComponent {
+  constructor(@Inject('heroName') private name: string) { }
 }
 // #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  providers: [ { provide: 'heroName', useValue: 'Windstorm' } ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesDIInjectModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
index a20453ef0a..0cc78d277e 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-di.component.ts
@@ -1,6 +1,4 @@
-import { Component, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
+import { Component }   from '@angular/core';
 import { DataService } from './data.service';
 
 // #docregion
@@ -8,18 +6,10 @@ import { DataService } from './data.service';
   selector: 'hero-di',
   template: `<h1>Hero: {{name}}</h1>`
 })
-class HeroComponent {
-  name: string;
+export class HeroComponent {
+  name = '';
   constructor(dataService: DataService) {
     this.name = dataService.getHeroName();
   }
 }
 // #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  providers: [ DataService ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesDIModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts
new file mode 100644
index 0000000000..fefe4a5470
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host-meta.component.ts
@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host-meta',
+  template: `
+    <h1 [class.active]="active">Hero Host in Metadata</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  host: {
+    // HostBindings to the <hero-host-meta> element
+    '[title]': 'title',
+    '[class.heading]': 'headingClass',
+
+    // HostListeners on the entire <hero-host-meta> element
+    '(click)': 'clicked()',
+    '(mouseenter)': 'enter($event)',
+    '(mouseleave)': 'leave($event)'
+  },
+  // Styles within (but excluding) the <hero-host-meta> element
+  styles: ['.active {background-color: coral;}']
+})
+export class HeroHostMetaComponent {
+  title = 'Hero Host in Metadata Tooltip';
+  headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  clicked() {
+    this.clicks += 1;
+  }
+
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts
new file mode 100644
index 0000000000..e8d72233c8
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-host.component.ts
@@ -0,0 +1,39 @@
+import { Component, HostBinding, HostListener } from '@angular/core';
+
+// #docregion
+@Component({
+  selector: 'hero-host',
+  template: `
+    <h1 [class.active]="active">Hero Host in Decorators</h1>
+    <div>Heading clicks: {{clicks}}</div>
+  `,
+  // Styles within (but excluding) the <hero-host> element
+  styles: ['.active {background-color: yellow;}']
+})
+export class HeroHostComponent {
+  // HostBindings to the <hero-host> element
+  @HostBinding() title = 'Hero Host in Decorators Tooltip';
+  @HostBinding('class.heading') headingClass = true;
+
+  active = false;
+  clicks = 0;
+
+  // HostListeners on the entire <hero-host> element
+  @HostListener('click')
+  clicked() {
+    this.clicks += 1;
+  }
+
+  @HostListener('mouseenter', ['$event'])
+  enter(event: Event) {
+    this.active = true;
+    this.headingClass = false;
+  }
+
+  @HostListener('mouseleave', ['$event'])
+  leave(event: Event) {
+    this.active = false;
+    this.headingClass = true;
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
index 8cf430c000..4b36411e78 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-io.component.ts
@@ -1,73 +1,26 @@
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-@Component({
-  selector: 'my-confirm',
-  template: `
-    <button (click)="onOkClick()">
-      {{okMsg}}
-    </button>
-    <button (click)="onNotOkClick()">
-      {{notOkMsg}}
-    </button>
-  `
-})
-class ConfirmComponent {
-  @Input() okMsg: string;
-  @Input('cancelMsg') notOkMsg: string;
-  @Output() ok =
-    new EventEmitter();
-  @Output('cancel') notOk =
-    new EventEmitter();
-
-  onOkClick() {
-    this.ok.next(true);
-  }
-  onNotOkClick() {
-    this.notOk.next(true);
-  }
-}
-// #enddocregion
-
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-io',
   template: `
-    <my-confirm [okMsg]="'OK'"
-                [cancelMsg]="'Cancel'"
-                (ok)="onOk()"
-                (cancel)="onCancel()">
-    </my-confirm>
+    <app-confirm [okMsg]="'OK'"
+                 [cancelMsg]="'Cancel'"
+                 (ok)="onOk()"
+                 (cancel)="onCancel()">
+    </app-confirm>
     <span *ngIf="okClicked">OK clicked</span>
     <span *ngIf="cancelClicked">Cancel clicked</span>
   `
 })
-class AppComponent {
-  okClicked: boolean;
-  cancelClicked: boolean;
+export class HeroIOComponent {
+  okClicked     = false;
+  cancelClicked = false;
 
   onOk() {
     this.okClicked = true;
   }
+
   onCancel() {
     this.cancelClicked = true;
   }
 }
-
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [
-    AppComponent,
-    ConfirmComponent
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class HeroesIOModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
index 1181c71cc9..2629c85a1a 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-lifecycle.component.ts
@@ -1,28 +1,14 @@
-// #docplaster
 // #docregion
 import { Component, OnInit } from '@angular/core';
-// #enddocregion
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
 
 @Component({
   selector: 'hero-lifecycle',
   template: `<h1>Hero: {{name}}</h1>`
 })
-// #docregion
-class HeroComponent
-    implements OnInit {
+export class HeroComponent implements OnInit {
   name: string;
   ngOnInit() {
-    this.name = 'Windstorm';
+    // todo: fetch from server async
+    setTimeout(() => this.name = 'Windstorm', 0);
   }
 }
-// #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesLifecycleModule { }
-
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts
new file mode 100644
index 0000000000..8b2d91ea85
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-queries.component.ts
@@ -0,0 +1,83 @@
+import {
+  Component,
+  ContentChild,
+  Input,
+  QueryList,
+  ViewChildren
+} from '@angular/core';
+
+@Component({
+  selector: 'content-child',
+  template: `
+  <span class="content-child" *ngIf="active">
+    Active
+  </span>`
+})
+export class ContentChildComponent {
+  active = false;
+
+  activate() {
+    this.active = !this.active;
+  }
+}
+
+////////////////////
+
+// #docregion content
+@Component({
+  selector: 'view-child',
+  template: `
+  <h2 [class.active]=active>
+    {{hero.name}}
+    <ng-content></ng-content>
+  </h2>`,
+  styles: ['.active {font-weight: bold; background-color: skyblue;}']
+})
+export class ViewChildComponent {
+  @Input() hero: any;
+  active = false;
+
+  @ContentChild(ContentChildComponent) content: ContentChildComponent;
+
+  activate() {
+    this.active = !this.active;
+    this.content.activate();
+  }
+}
+// #enddocregion content
+
+////////////////////
+
+// #docregion view
+@Component({
+  selector: 'hero-queries',
+  template: `
+    <view-child *ngFor="let hero of heroData" [hero]="hero">
+      <content-child></content-child>
+    </view-child>
+    <button (click)="activate()">{{buttonLabel}} All</button>
+  `
+})
+export class HeroQueriesComponent {
+  active = false;
+  heroData = [
+    {id: 1, name: 'Windstorm'},
+    {id: 2, name: 'LaughingGas'}
+  ];
+
+  @ViewChildren(ViewChildComponent) views: QueryList<ViewChildComponent>;
+
+  activate() {
+    this.active = !this.active;
+    this.views.forEach(
+      view => view.activate()
+    );
+  }
+
+  // #docregion defined-property
+  get buttonLabel() {
+    return this.active ? 'Deactivate' : 'Activate';
+  }
+  // #enddocregion defined-property
+}
+// #enddocregion view
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html
new file mode 100644
index 0000000000..0e93122d5c
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.html
@@ -0,0 +1,4 @@
+<!-- #docregion -->
+<h1>{{titlePrefix}} {{title}}</h1>
+<button (click)="ok()">OK</button>
+<p>{{ msg }}</p>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts
new file mode 100644
index 0000000000..074f2edd61
--- /dev/null
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero-title.component.ts
@@ -0,0 +1,22 @@
+import { Attribute, Component, Inject, Optional } from '@angular/core';
+
+// #docregion
+// #docregion templateUrl
+@Component({
+  moduleId: module.id,
+  selector: 'hero-title',
+  templateUrl: 'hero-title.component.html'
+})
+// #enddocregion templateUrl
+export class HeroTitleComponent {
+  msg: string = '';
+  constructor(
+    @Inject('titlePrefix') @Optional() private titlePrefix: string,
+    @Attribute('title') private title: string
+  ) { }
+
+  ok() {
+    this.msg = 'OK!';
+  }
+}
+// #enddocregion
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
index 4b4ba8529d..4ea4c11611 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/hero.component.ts
@@ -1,30 +1,14 @@
-// #docplaster
 // #docregion metadata
 import { Component } from '@angular/core';
 
 @Component({
   selector: 'hero-view',
-  template:
-    '<h1>Hero: {{getName()}}</h1>'
+  template: '<h1>{{title}}: {{getName()}}</h1>'
 })
-// #docregion appexport
-// #docregion class
+// #docregion appexport, class
 export class HeroComponent {
   title = 'Hero Detail';
   getName() {return 'Windstorm'; }
 }
-// #enddocregion class
-// #enddocregion appexport
+// #enddocregion appexport, class
 // #enddocregion metadata
-
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroComponent ],
-  bootstrap: [ HeroComponent ]
-})
-export class HeroesModule { }
-
-
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
deleted file mode 100644
index 407b8b0e29..0000000000
--- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-bindings.component.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import {
-  Component,
-  HostBinding,
-  HostListener,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-// #docregion
-@Component({
-  selector: 'heroes-bindings',
-  template: `<h1 [class.active]="active">
-    Tour of Heroes
-  </h1>`
-})
-class HeroesComponent {
-  @HostBinding() title = 'Tooltip content';
-  @HostBinding('class.heading')
-    hClass = true;
-  active: boolean;
-
-  constructor() {}
-
-  @HostListener('click')
-  clicked() {
-    this.active = !this.active;
-  }
-
-  @HostListener('dblclick', ['$event'])
-  doubleClicked(evt: Event) {
-    this.active = true;
-  }
-}
-// #enddocregion
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [ HeroesComponent ],
-  bootstrap: [ HeroesComponent ]
-})
-export class HeroesHostBindingsModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts b/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
deleted file mode 100644
index 97003766e6..0000000000
--- a/public/docs/_examples/cb-ts-to-js/ts/app/heroes-queries.component.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import {
-  Component,
-  ViewChildren,
-  ContentChild,
-  QueryList,
-  Input,
-  NgModule
-} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@Component({
-  selector: 'active-label',
-  template: `<span class="active-label"
-                   *ngIf="active">
-    Active
-  </span>`
-})
-class ActiveLabelComponent {
-  active: boolean;
-
-  activate() {
-    this.active = true;
-  }
-}
-
-// #docregion content
-@Component({
-  selector: 'a-hero',
-  template: `<h2 [class.active]=active>
-    {{hero.name}}
-    <ng-content></ng-content>
-  </h2>`
-})
-class HeroComponent {
-  @Input() hero: any;
-  active: boolean;
-
-  @ContentChild(ActiveLabelComponent)
-  label: ActiveLabelComponent;
-
-  activate() {
-    this.active = true;
-    this.label.activate();
-  }
-}
-// #enddocregion content
-
-
-// #docregion view
-@Component({
-  selector: 'heroes-queries',
-  template: `
-    <a-hero *ngFor="let hero of heroData"
-          [hero]="hero">
-      <active-label></active-label>
-    </a-hero>
-    <button (click)="activate()">
-      Activate
-    </button>
-  `
-})
-class HeroesQueriesComponent {
-  heroData = [
-    {id: 1, name: 'Windstorm'},
-    {id: 2, name: 'Superman'}
-  ];
-
-  @ViewChildren(HeroComponent)
-  heroCmps: QueryList<HeroComponent>;
-
-  activate() {
-    this.heroCmps.forEach(
-      (cmp) => cmp.activate()
-    );
-  }
-}
-// #enddocregion view
-
-@NgModule({
-  imports: [ BrowserModule ],
-  declarations: [
-    HeroesQueriesComponent,
-    HeroComponent,
-    ActiveLabelComponent
-  ],
-  bootstrap: [ HeroesQueriesComponent ]
-})
-export class HeroesQueriesModule { }
diff --git a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
index 92f5af5e1a..7cc80b5964 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
+++ b/public/docs/_examples/cb-ts-to-js/ts/app/main.ts
@@ -1,30 +1,4 @@
-/* tslint:disable no-unused-variable */
-// #docregion ng2import
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import {
-  LocationStrategy,
-  HashLocationStrategy
-} from '@angular/common';
-// #enddocregion ng2import
-
-// #docregion appimport
-import { HeroComponent } from './hero.component';
-// #enddocregion appimport
-
-import { HeroesModule } from './hero.component';
-import { HeroesLifecycleModule } from './hero-lifecycle.component';
-import { HeroesDIModule } from './hero-di.component';
-import { HeroesDIInjectModule } from './hero-di-inject.component';
-import { HeroesDIInjectAdditionalModule } from './hero-di-inject-additional.component';
-import { HeroesIOModule } from './hero-io.component';
-import { HeroesHostBindingsModule } from './heroes-bindings.component';
-import { HeroesQueriesModule } from './heroes-queries.component';
-
-platformBrowserDynamic().bootstrapModule(HeroesModule);
-platformBrowserDynamic().bootstrapModule(HeroesLifecycleModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIInjectModule);
-platformBrowserDynamic().bootstrapModule(HeroesDIInjectAdditionalModule);
-platformBrowserDynamic().bootstrapModule(HeroesIOModule);
-platformBrowserDynamic().bootstrapModule(HeroesHostBindingsModule);
-platformBrowserDynamic().bootstrapModule(HeroesQueriesModule);
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/cb-ts-to-js/ts/index.html b/public/docs/_examples/cb-ts-to-js/ts/index.html
index c635706f38..5791134d4f 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/index.html
+++ b/public/docs/_examples/cb-ts-to-js/ts/index.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <title>TypeScript to JavaScript</title>
 
     <!-- Polyfills for older browsers -->
     <script src="node_modules/core-js/client/shim.min.js"></script>
@@ -20,32 +21,7 @@
   </head>
 
   <body>
-    <a id="toc"></a>
-    <h1>TypeScript to JavaScript</h1>
-    <a href="#class-metadata">Classes and Class Metadata</a><br>
-    <a href="#property-metadata">Input and Output Metadata</a><br>
-    <a href="#dependency-injection">Dependency Injection</a><br>
-    <a href="#other-property-metadata">Host and Query Metadata</a><br>
-
-    <hr>
-    <h4 id="class-metadata">Classes and Class Metadata</h4>
-    <hero-view id="class-metadata">Loading hero-view...</hero-view>
-    <hero-lifecycle>Loading hero-lifecycle...</hero-lifecycle>
-
-    <hr>
-    <h4 id="property-metadata">Input and Output Metadata</h4>
-    <hero-io>Loading hero-io...</hero-io>
-
-    <hr>
-    <h4 id="dependency-injection">Dependency Injection</h4>
-    <hero-di>Loading hero-di...</hero-di>
-    <hero-di-inject>Loading hero-di-inject...</hero-di-inject>
-    <hero-di-inject-additional>Loading hero-di-inject-additional...</hero-di-inject-additional>
-
-    <hr>
-    <h4 id="other-property-metadata">Host and Query Metadata</h4>
-    <heroes-bindings>Loading heroes-bindings...</heroes-bindings>
-    <heroes-queries id="other-property-metadata">Loading heroes-queries...</heroes-queries>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
diff --git a/public/docs/_examples/ngmodule/ts/index.0.html b/public/docs/_examples/ngmodule/ts/index.0.html
index 4ad8c4fc18..1b72565156 100644
--- a/public/docs/_examples/ngmodule/ts/index.0.html
+++ b/public/docs/_examples/ngmodule/ts/index.0.html
@@ -13,7 +13,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
-
+    <script>document.noBootstrap = true;</script>
     <script src="systemjs.config.js"></script>
     <script>
       System.import('app/main.0').catch(function(err){ console.error(err); });
diff --git a/public/docs/_examples/ngmodule/ts/index.1.html b/public/docs/_examples/ngmodule/ts/index.1.html
index c004c4ed1f..7ac7dec883 100644
--- a/public/docs/_examples/ngmodule/ts/index.1.html
+++ b/public/docs/_examples/ngmodule/ts/index.1.html
@@ -13,7 +13,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
-
+    <script>document.noBootstrap = true;</script>
     <script src="systemjs.config.js"></script>
     <script>
       System.import('app/main.1').catch(function(err){ console.error(err); });
diff --git a/public/docs/_examples/ngmodule/ts/index.1b.html b/public/docs/_examples/ngmodule/ts/index.1b.html
index a681333223..3618926f0a 100644
--- a/public/docs/_examples/ngmodule/ts/index.1b.html
+++ b/public/docs/_examples/ngmodule/ts/index.1b.html
@@ -13,7 +13,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
-
+    <script>document.noBootstrap = true;</script>
     <script src="systemjs.config.js"></script>
     <script>
       System.import('app/main.1b').catch(function(err){ console.error(err); });
diff --git a/public/docs/_examples/ngmodule/ts/index.2.html b/public/docs/_examples/ngmodule/ts/index.2.html
index 8294f17a7d..dee6247ac6 100644
--- a/public/docs/_examples/ngmodule/ts/index.2.html
+++ b/public/docs/_examples/ngmodule/ts/index.2.html
@@ -13,7 +13,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
-
+    <script>document.noBootstrap = true;</script>
     <script src="systemjs.config.js"></script>
     <script>
       System.import('app/main.2').catch(function(err){ console.error(err); });
diff --git a/public/docs/_examples/ngmodule/ts/index.3.html b/public/docs/_examples/ngmodule/ts/index.3.html
index 20b639998b..6c5249bf65 100644
--- a/public/docs/_examples/ngmodule/ts/index.3.html
+++ b/public/docs/_examples/ngmodule/ts/index.3.html
@@ -13,7 +13,7 @@
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
     <script src="node_modules/systemjs/dist/system.src.js"></script>
-
+    <script>document.noBootstrap = true;</script>
     <script src="systemjs.config.js"></script>
     <script>
       System.import('app/main.3').catch(function(err){ console.error(err); });
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index 1c16e0f39a..160fa06771 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -27,7 +27,8 @@
     "@angular/router": "~3.2.0",
     "@angular/upgrade": "~2.2.0",
 
-    "angular-in-memory-web-api": "~0.1.13",
+    "angular-in-memory-web-api": "~0.1.15",
+
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",
     "rollup": "^0.36.0",
@@ -51,6 +52,9 @@
     "@types/selenium-webdriver": "^2.53.32",
     "angular2-template-loader": "^0.4.0",
     "awesome-typescript-loader": "^2.2.4",
+    "babel-cli": "^6.16.0",
+    "babel-preset-angular2": "^0.0.2",
+    "babel-preset-es2015": "^6.16.0",
     "canonical-path": "0.0.2",
     "concurrently": "^3.0.0",
     "css-loader": "^0.25.0",
diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json
index 212ffc8735..497c673b7f 100644
--- a/public/docs/_examples/quickstart/js/package.1.json
+++ b/public/docs/_examples/quickstart/js/package.1.json
@@ -12,17 +12,17 @@
     }
   ],
   "dependencies": {
-    "@angular/common": "~2.1.1",
-    "@angular/compiler": "~2.1.1",
-    "@angular/core": "~2.1.1",
-    "@angular/forms": "~2.1.1",
-    "@angular/http": "~2.1.1",
-    "@angular/platform-browser": "~2.1.1",
-    "@angular/platform-browser-dynamic": "~2.1.1",
-    "@angular/router": "~3.1.1",
-    "@angular/upgrade": "~2.1.1",
+    "@angular/common": "~2.2.0",
+    "@angular/compiler": "~2.2.0",
+    "@angular/core": "~2.2.0",
+    "@angular/forms": "~2.2.0",
+    "@angular/http": "~2.2.0",
+    "@angular/platform-browser": "~2.2.0",
+    "@angular/platform-browser-dynamic": "~2.2.0",
+    "@angular/router": "~3.2.0",
+    "@angular/upgrade": "~2.2.0",
 
-    "angular-in-memory-web-api": "~0.1.5",
+    "angular-in-memory-web-api": "~0.1.15",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.0-beta.12",
diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json
index 0eddc20502..3236914309 100644
--- a/public/docs/_examples/quickstart/ts/package.1.json
+++ b/public/docs/_examples/quickstart/ts/package.1.json
@@ -14,17 +14,17 @@
     }
   ],
   "dependencies": {
-    "@angular/common": "~2.1.1",
-    "@angular/compiler": "~2.1.1",
-    "@angular/core": "~2.1.1",
-    "@angular/forms": "~2.1.1",
-    "@angular/http": "~2.1.1",
-    "@angular/platform-browser": "~2.1.1",
-    "@angular/platform-browser-dynamic": "~2.1.1",
-    "@angular/router": "~3.1.1",
-    "@angular/upgrade": "~2.1.1",
+    "@angular/common": "~2.2.0",
+    "@angular/compiler": "~2.2.0",
+    "@angular/core": "~2.2.0",
+    "@angular/forms": "~2.2.0",
+    "@angular/http": "~2.2.0",
+    "@angular/platform-browser": "~2.2.0",
+    "@angular/platform-browser-dynamic": "~2.2.0",
+    "@angular/router": "~3.2.0",
+    "@angular/upgrade": "~2.2.0",
 
-    "angular-in-memory-web-api": "~0.1.13",
+    "angular-in-memory-web-api": "~0.1.15",
     "core-js": "^2.4.1",
     "reflect-metadata": "^0.1.8",
     "rxjs": "5.0.0-beta.12",
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts
index 0cb1d8f5c7..e7d83f113f 100644
--- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts
+++ b/public/docs/_examples/router/ts/app/admin/admin-routing.module.1.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }      from '@angular/core';
-import { RouterModule }  from '@angular/router';
+import { NgModule }              from '@angular/core';
+import { RouterModule, Routes }  from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -9,24 +9,26 @@ import { ManageCrisesComponent }    from './manage-crises.component';
 import { ManageHeroesComponent }    from './manage-heroes.component';
 
 // #docregion admin-routes
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const adminRoutes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+    children: [
       {
-        path: 'admin',
-        component: AdminComponent,
+        path: '',
         children: [
-          {
-            path: '',
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ]
-          }
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts
index 2087d7c913..dc3f28b5c4 100644
--- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts
+++ b/public/docs/_examples/router/ts/app/admin/admin-routing.module.2.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { NgModule }              from '@angular/core';
-import { RouterModule }  from '@angular/router';
+import { RouterModule, Routes }  from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -11,29 +11,31 @@ import { ManageHeroesComponent }    from './manage-heroes.component';
 // #docregion admin-route, can-activate-child
 import { AuthGuard }                from '../auth-guard.service';
 
+const adminRoutes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+    canActivate: [AuthGuard],
+    children: [
+      {
+        path: '',
+        children: [
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
+        ],
+        // #enddocregion admin-route
+        // #docregion can-activate-child
+        canActivateChild: [AuthGuard]
+        // #docregion admin-route
+      }
+    ]
+  }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forChild([
-      {
-        path: 'admin',
-        component: AdminComponent,
-        canActivate: [AuthGuard],
-        children: [
-          {
-            path: '',
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ],
-            // #enddocregion admin-route
-            // #docregion can-activate-child
-            canActivateChild: [AuthGuard]
-            // #docregion admin-route
-          }
-        ]
-      }
-    ])
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts
index 92878febb2..63f1c9aaf4 100644
--- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts
+++ b/public/docs/_examples/router/ts/app/admin/admin-routing.module.3.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }      from '@angular/core';
-import { RouterModule }  from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -12,26 +12,28 @@ import { ManageHeroesComponent }    from './manage-heroes.component';
 import { AuthGuard }                from '../auth-guard.service';
 
 // #docregion can-activate-child
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const adminRoutes: Routes = [
+  {
+    path: 'admin',
+    component: AdminComponent,
+    canActivate: [AuthGuard],
+    children: [
       {
-        path: 'admin',
-        component: AdminComponent,
-        canActivate: [AuthGuard],
+        path: '',
+        canActivateChild: [AuthGuard],
         children: [
-          {
-            path: '',
-            canActivateChild: [AuthGuard],
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ]
-          }
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts b/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts
index b83a75945b..a6ab988005 100644
--- a/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts
+++ b/public/docs/_examples/router/ts/app/admin/admin-routing.module.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { AdminComponent }           from './admin.component';
 import { AdminDashboardComponent }  from './admin-dashboard.component';
@@ -11,26 +11,28 @@ import { ManageHeroesComponent }    from './manage-heroes.component';
 // #docregion admin-route
 import { AuthGuard }                from '../auth-guard.service';
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const adminRoutes: Routes = [
+  {
+    path: '',
+    component: AdminComponent,
+    canActivate: [AuthGuard],
+    children: [
       {
         path: '',
-        component: AdminComponent,
-        canActivate: [AuthGuard],
+        canActivateChild: [AuthGuard],
         children: [
-          {
-            path: '',
-            canActivateChild: [AuthGuard],
-            children: [
-              { path: 'crises', component: ManageCrisesComponent },
-              { path: 'heroes', component: ManageHeroesComponent },
-              { path: '', component: AdminDashboardComponent }
-            ]
-          }
+          { path: 'crises', component: ManageCrisesComponent },
+          { path: 'heroes', component: ManageHeroesComponent },
+          { path: '', component: AdminDashboardComponent }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(adminRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.1.ts b/public/docs/_examples/router/ts/app/app-routing.module.1.ts
index 8be1df9926..8b5f6983f5 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.1.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.1.ts
@@ -1,17 +1,19 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisListComponent }  from './crisis-list.component';
 import { HeroListComponent }    from './hero-list.component';
 
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent },
+  { path: 'heroes', component: HeroListComponent }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      { path: 'crisis-center', component: CrisisListComponent },
-      { path: 'heroes', component: HeroListComponent }
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.2.ts b/public/docs/_examples/router/ts/app/app-routing.module.2.ts
index eed5688574..53f0f24056 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.2.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.2.ts
@@ -1,15 +1,17 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisListComponent }  from './crisis-list.component';
 
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      { path: 'crisis-center', component: CrisisListComponent },
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.3.ts b/public/docs/_examples/router/ts/app/app-routing.module.3.ts
index a30d061dc3..5e8a08e40a 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.3.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.3.ts
@@ -1,13 +1,15 @@
 // #docplaster
 // #docregion
 import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
+
+const appRoutes: Routes = [
+
+];
 
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.4.ts b/public/docs/_examples/router/ts/app/app-routing.module.4.ts
index 2ce11b8105..7ea7cb11ed 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.4.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.4.ts
@@ -1,15 +1,17 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
 
+const appRoutes: Routes = [
+
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.5.ts b/public/docs/_examples/router/ts/app/app-routing.module.5.ts
index 6e35f64f73..33505b532b 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.5.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.5.ts
@@ -2,7 +2,7 @@
 // #docregion
 import { NgModule }     from '@angular/core';
 // #docregion import-router
-import { RouterModule } from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 // #enddocregion import-router
 
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
@@ -11,17 +11,20 @@ import { AuthGuard }          from './auth-guard.service';
 // #enddocregion can-load-guard
 
 // #docregion lazy-load-admin, can-load-guard
+
+const appRoutes: Routes = [
+  {
+    path: 'admin',
+    loadChildren: 'app/admin/admin.module#AdminModule',
+// #enddocregion lazy-load-admin
+    canLoad: [AuthGuard]
+// #docregion lazy-load-admin
+  }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      {
-        path: 'admin',
-        loadChildren: 'app/admin/admin.module#AdminModule',
-    // #enddocregion lazy-load-admin
-        canLoad: [AuthGuard]
-    // #docregion lazy-load-admin
-      }
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.6.ts b/public/docs/_examples/router/ts/app/app-routing.module.6.ts
index 68bcc30413..c9f1f2916c 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.6.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.6.ts
@@ -2,7 +2,7 @@
 // #docregion, preload-v1
 import { NgModule }     from '@angular/core';
 import {
-  RouterModule,
+  RouterModule, Routes,
 // #enddocregion preload-v1
   PreloadAllModules
 // #docregion preload-v1
@@ -11,27 +11,30 @@ import {
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
 import { AuthGuard }          from './auth-guard.service';
 
+const appRoutes: Routes = [
+  {
+    path: 'admin',
+    loadChildren: 'app/admin/admin.module#AdminModule',
+    canLoad: [AuthGuard]
+  },
+  {
+    path: '',
+    redirectTo: '/heroes',
+    pathMatch: 'full'
+  },
+  {
+    path: 'crisis-center',
+    loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
+  }
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      {
-        path: 'admin',
-        loadChildren: 'app/admin/admin.module#AdminModule',
-        canLoad: [AuthGuard]
-      },
-      {
-        path: '',
-        redirectTo: '/heroes',
-        pathMatch: 'full'
-      },
-      {
-        path: 'crisis-center',
-        loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule'
-      },
-    ],
-    // #enddocregion preload-v1
-    { preloadingStrategy: PreloadAllModules }
-    // #docregion preload-v1
+    RouterModule.forRoot(
+      appRoutes
+      // #enddocregion preload-v1
+      , { preloadingStrategy: PreloadAllModules }
+      // #docregion preload-v1
     )
   ],
   exports: [
diff --git a/public/docs/_examples/router/ts/app/app-routing.module.ts b/public/docs/_examples/router/ts/app/app-routing.module.ts
index 8fa63edb1c..9cef4db94e 100644
--- a/public/docs/_examples/router/ts/app/app-routing.module.ts
+++ b/public/docs/_examples/router/ts/app/app-routing.module.ts
@@ -1,36 +1,40 @@
 // #docplaster
 // #docregion, preload-v1
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CanDeactivateGuard } from './can-deactivate-guard.service';
 import { AuthGuard }          from './auth-guard.service';
 import { PreloadSelectedModules } from './selective-preload-strategy';
 
+const appRoutes: Routes = [
+  {
+    path: 'admin',
+    loadChildren: 'app/admin/admin.module#AdminModule',
+    canLoad: [AuthGuard]
+  },
+  {
+    path: '',
+    redirectTo: '/heroes',
+    pathMatch: 'full'
+  },
+  // #docregion preload-v2
+  {
+    path: 'crisis-center',
+    loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
+    data: {
+      preload: true
+    }
+  }
+  // #enddocregion preload-v2
+];
+
 @NgModule({
   imports: [
-    RouterModule.forRoot([
-      {
-        path: 'admin',
-        loadChildren: 'app/admin/admin.module#AdminModule',
-        canLoad: [AuthGuard]
-      },
-      {
-        path: '',
-        redirectTo: '/heroes',
-        pathMatch: 'full'
-      },
-      // #docregion preload-v2
-      {
-        path: 'crisis-center',
-        loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
-        data: {
-          preload: true
-        }
-      }
-      // #enddocregion preload-v2
-    ],
-    { preloadingStrategy: PreloadSelectedModules })
+    RouterModule.forRoot(
+      appRoutes,
+      { preloadingStrategy: PreloadSelectedModules }
+    )
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/app.module.0.ts b/public/docs/_examples/router/ts/app/app.module.0.ts
index df91982cd1..9844f30586 100644
--- a/public/docs/_examples/router/ts/app/app.module.0.ts
+++ b/public/docs/_examples/router/ts/app/app.module.0.ts
@@ -1,10 +1,10 @@
 // #docplaster
 // #docregion
 // #docregion router-basics
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
-import { RouterModule }   from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { BrowserModule }        from '@angular/platform-browser';
+import { FormsModule }          from '@angular/forms';
+import { RouterModule, Routes } from '@angular/router';
 
 import { AppComponent }           from './app.component';
 import { HeroListComponent }      from './hero-list.component';
@@ -14,27 +14,29 @@ import { PageNotFoundComponent as HeroDetailComponent } from './not-found.compon
 import { PageNotFoundComponent as HomeComponent } from './not-found.component';
 
 // #docregion route-config
+const appRoutes: Routes = [
+  // #docregion route-defs
+  // #docregion hero-detail-route
+  { path: 'hero/:id', component: HeroDetailComponent },
+  // #enddocregion hero-detail-route
+  { path: 'crisis-center', component: CrisisListComponent },
+  {
+    path: 'heroes',
+    component: HeroListComponent,
+    data: {
+      title: 'Heroes List'
+    }
+  },
+  { path: '', component: HomeComponent },
+  // #enddocregion route-defs
+  { path: '**', component: PageNotFoundComponent }
+];
+
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    RouterModule.forRoot([
-      // #docregion route-defs
-      // #docregion hero-detail-route
-      { path: 'hero/:id', component: HeroDetailComponent },
-      // #enddocregion hero-detail-route
-      { path: 'crisis-center', component: CrisisListComponent },
-      {
-        path: 'heroes',
-        component: HeroListComponent,
-        data: {
-          title: 'Heroes List'
-        }
-      },
-      { path: '', component: HomeComponent },
-      // #enddocregion route-defs
-      { path: '**', component: PageNotFoundComponent }
-    ])
+    RouterModule.forRoot(appRoutes)
   ],
   declarations: [
     AppComponent,
diff --git a/public/docs/_examples/router/ts/app/app.module.1.ts b/public/docs/_examples/router/ts/app/app.module.1.ts
index 6338c9bca3..f98ef7528e 100644
--- a/public/docs/_examples/router/ts/app/app.module.1.ts
+++ b/public/docs/_examples/router/ts/app/app.module.1.ts
@@ -1,10 +1,10 @@
 // #docplaster
 // #docregion
-import { NgModule }       from '@angular/core';
-import { BrowserModule }  from '@angular/platform-browser';
-import { FormsModule }    from '@angular/forms';
+import { NgModule }             from '@angular/core';
+import { BrowserModule }        from '@angular/platform-browser';
+import { FormsModule }          from '@angular/forms';
 // #docregion import-router, route-config
-import { RouterModule }   from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 // #enddocregion import-router, route-config
 
 // #docregion router-basics
@@ -12,16 +12,18 @@ import { AppComponent }         from './app.component';
 import { CrisisListComponent }  from './crisis-list.component';
 import { HeroListComponent }    from './hero-list.component';
 
+// #docregion route-config
+const appRoutes: Routes = [
+  { path: 'crisis-center', component: CrisisListComponent },
+  { path: 'heroes', component: HeroListComponent }
+];
+// #enddocregion route-config
+
 @NgModule({
   imports: [
     BrowserModule,
     FormsModule,
-    // #docregion route-config
-    RouterModule.forRoot([
-      { path: 'crisis-center', component: CrisisListComponent },
-      { path: 'heroes', component: HeroListComponent }
-    ])
-    // #enddocregion route-config
+    RouterModule.forRoot(appRoutes)
   ],
   declarations: [
     AppComponent,
diff --git a/public/docs/_examples/router/ts/app/app.routing.1.ts b/public/docs/_examples/router/ts/app/app.routing.1.ts
deleted file mode 100644
index 736f49b4fb..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.1.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// #docplaster
-// #docregion
-// #docregion route-config
-import { ModuleWithProviders } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-// #enddocregion route-config
-// #enddocregion
-
-// #docregion base-routes
-import { HeroListComponent }     from './hero-list.component';
-import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
-import { HeroDetailComponent }   from './heroes/hero-detail.component';
-import { PageNotFoundComponent } from './not-found.component';
-import { PageNotFoundComponent as HomeComponent } from './not-found.component';
-// #enddocregion base-routes
-
-// #docregion
-// #docregion route-config
-const appRoutes: Routes = [
-  // #docregion route-defs
-  // #docregion hero-detail-route
-  { path: 'hero/:id', component: HeroDetailComponent },
-  // #enddocregion hero-detail-route
-  { path: 'crisis-center', component: CrisisCenterComponent },
-  {
-    path: 'heroes',
-    component: HeroListComponent,
-    data: {
-      title: 'Heroes List'
-    }
-  },
-  { path: '', component: HomeComponent },
-  // #enddocregion route-defs
-  { path: '**', component: PageNotFoundComponent }
-];
-
-export const appRoutingProviders: any[] = [
-
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
-// #enddocregion route-config
-// #enddocregion
diff --git a/public/docs/_examples/router/ts/app/app.routing.2.ts b/public/docs/_examples/router/ts/app/app.routing.2.ts
deleted file mode 100644
index 1115c9084e..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.2.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// #docplaster
-// #docregion
-import { ModuleWithProviders } from '@angular/core';
-// #docregion route-config
-import { Routes, RouterModule } from '@angular/router';
-
-// #enddocregion route-config
-import { CrisisListComponent }  from './crisis-list.component';
-import { HeroListComponent }    from './hero-list.component';
-
-// #docregion route-config
-const appRoutes: Routes = [
-  { path: 'crisis-center', component: CrisisListComponent },
-  { path: 'heroes', component: HeroListComponent }
-];
-
-export const appRoutingProviders: any[] = [
-
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
-// #enddocregion route-config
diff --git a/public/docs/_examples/router/ts/app/app.routing.3.ts b/public/docs/_examples/router/ts/app/app.routing.3.ts
deleted file mode 100644
index 247ec7f2dd..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.3.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// #docplaster
-// #docregion
-import { ModuleWithProviders }  from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { CrisisCenterComponent } from './crisis-center/crisis-center.component';
-
-const appRoutes: Routes = [
-  { path: 'crisis-center', component: CrisisCenterComponent }
-];
-
-export const appRoutingProviders: any[] = [
-
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.4.ts b/public/docs/_examples/router/ts/app/app.routing.4.ts
deleted file mode 100644
index ff04dd8bfd..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.4.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// #docregion
-import { ModuleWithProviders }   from '@angular/core';
-import { Routes, RouterModule }  from '@angular/router';
-
-const appRoutes: Routes = [
-
-];
-
-export const appRoutingProviders: any[] = [
-
-];
-
-export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.5.ts b/public/docs/_examples/router/ts/app/app.routing.5.ts
deleted file mode 100644
index 8ce3e0a10f..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.5.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// // #docregion
-// import { ModuleWithProviders }   from '@angular/core';
-// import { Routes, RouterModule }  from '@angular/router';
-//
-// import { loginRoutes,
-//          authProviders }      from './login.routing';
-//
-// const appRoutes: Routes = [
-//   ...loginRoutes
-// ];
-//
-// export const appRoutingProviders: any[] = [
-//   authProviders
-// ];
-//
-// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/app.routing.6.ts b/public/docs/_examples/router/ts/app/app.routing.6.ts
deleted file mode 100644
index 23e2897cf1..0000000000
--- a/public/docs/_examples/router/ts/app/app.routing.6.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// // #docregion
-// import { ModuleWithProviders } from '@angular/core';
-// // #docregion import-router
-// import { Routes, RouterModule }   from '@angular/router';
-// // #enddocregion import-router
-//
-// import { loginRoutes,
-//          authProviders }  from './login.routing';
-//
-// import { CanDeactivateGuard } from './can-deactivate-guard.service';
-//
-// const appRoutes: Routes = [
-//   ...loginRoutes
-// ];
-//
-// export const appRoutingProviders: any[] = [
-//   authProviders,
-//   CanDeactivateGuard
-// ];
-// 
-// export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts
index 829175cea6..e646f467d1 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.1.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -9,30 +9,32 @@ import { CrisisCenterComponent }     from './crisis-center.component';
 import { CrisisDetailComponent }     from './crisis-detail.component';
 
 // #docregion routes
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const crisisCenterRoutes: Routes = [
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
+        path: '',
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts
index 9c782edc0e..c3e3561dee 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.2.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion routes
-import { NgModule }       from '@angular/core';
-import { RouterModule }   from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -18,50 +18,52 @@ import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 // #enddocregion crisis-detail-resolve
 // #docregion routes
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-    // #enddocregion routes
-      // #docregion redirect, routes
+const crisisCenterRoutes: Routes = [
+// #enddocregion routes
+  // #docregion redirect, routes
+  {
+    path: '',
+    redirectTo: '/crisis-center',
+    pathMatch: 'full'
+  },
+  // #enddocregion redirect, routes
+  // #docregion routes
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        redirectTo: '/crisis-center',
-        pathMatch: 'full'
-      },
-      // #enddocregion redirect, routes
-      // #docregion routes
-      {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+  // #enddocregion routes
+            // #docregion can-deactivate-guard
+            canDeactivate: [CanDeactivateGuard],
+            // #enddocregion can-deactivate-guard
+            // #docregion crisis-detail-resolve
+            resolve: {
+              crisis: CrisisDetailResolve
+            }
+            // #enddocregion crisis-detail-resolve
+  // #docregion routes
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-      // #enddocregion routes
-                // #docregion can-deactivate-guard
-                canDeactivate: [CanDeactivateGuard],
-                // #enddocregion can-deactivate-guard
-                // #docregion crisis-detail-resolve
-                resolve: {
-                  crisis: CrisisDetailResolve
-                }
-                // #enddocregion crisis-detail-resolve
-      // #docregion routes
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-      // #docregion routes
-    ])
+    ]
+  }
+  // #docregion routes
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts
index 693a72f8c2..6d605dbe84 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.3.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -11,36 +11,38 @@ import { CrisisDetailComponent }     from './crisis-detail.component';
 // #docregion can-deactivate-guard
 import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const crisisCenterRoutes: Routes = [
+  {
+    path: '',
+    redirectTo: '/crisis-center',
+    pathMatch: 'full'
+  },
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        redirectTo: '/crisis-center',
-        pathMatch: 'full'
-      },
-      {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard]
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-                canDeactivate: [CanDeactivateGuard]
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts
index 17843ace3e..15b346d01f 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.4.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -13,41 +13,43 @@ import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 // #docregion crisis-detail-resolve
 import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      // #docregion redirect
+const crisisCenterRoutes: Routes = [
+  // #docregion redirect
+  {
+    path: '',
+    redirectTo: '/crisis-center',
+    pathMatch: 'full'
+  },
+  // #enddocregion redirect
+  {
+    path: 'crisis-center',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        redirectTo: '/crisis-center',
-        pathMatch: 'full'
-      },
-      // #enddocregion redirect
-      {
-        path: 'crisis-center',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard],
+            resolve: {
+              crisis: CrisisDetailResolve
+            }
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-                canDeactivate: [CanDeactivateGuard],
-                resolve: {
-                  crisis: CrisisDetailResolve
-                }
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts
index e1d2ae1207..75ca2a7ee8 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-center-routing.module.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { CrisisCenterHomeComponent } from './crisis-center-home.component';
 import { CrisisListComponent }       from './crisis-list.component';
@@ -13,34 +13,36 @@ import { CanDeactivateGuard }    from '../can-deactivate-guard.service';
 // #docregion crisis-detail-resolve
 import { CrisisDetailResolve }   from './crisis-detail-resolve.service';
 
-@NgModule({
-  imports: [
-    RouterModule.forChild([
+const crisisCenterRoutes: Routes = [
+  {
+    path: '',
+    component: CrisisCenterComponent,
+    children: [
       {
         path: '',
-        component: CrisisCenterComponent,
+        component: CrisisListComponent,
         children: [
+          {
+            path: ':id',
+            component: CrisisDetailComponent,
+            canDeactivate: [CanDeactivateGuard],
+            resolve: {
+              crisis: CrisisDetailResolve
+            }
+          },
           {
             path: '',
-            component: CrisisListComponent,
-            children: [
-              {
-                path: ':id',
-                component: CrisisDetailComponent,
-                canDeactivate: [CanDeactivateGuard],
-                resolve: {
-                  crisis: CrisisDetailResolve
-                }
-              },
-              {
-                path: '',
-                component: CrisisCenterHomeComponent
-              }
-            ]
+            component: CrisisCenterHomeComponent
           }
         ]
       }
-    ])
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(crisisCenterRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts
index b4b92f30cc..25d2806e8f 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail-resolve.service.ts
@@ -10,7 +10,7 @@ export class CrisisDetailResolve implements Resolve<Crisis> {
   constructor(private cs: CrisisService, private router: Router) {}
 
   resolve(route: ActivatedRouteSnapshot): Promise<Crisis>|boolean {
-    let id = +route.params['id'];
+    let id = route.params['id'];
 
     return this.cs.getCrisis(id).then(crisis => {
       if (crisis) {
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
index 2a52513b6f..b314fb615f 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts
@@ -1,5 +1,6 @@
 // #docplaster
 // #docregion
+import 'rxjs/add/operator/switchMap';
 import { Component, OnInit,
          HostBinding, trigger, transition,
          animate, style, state }          from '@angular/core';
@@ -12,9 +13,9 @@ import { DialogService }          from '../dialog.service';
   // #docregion template
   template: `
   <div *ngIf="crisis">
-    <h3>"{{editName}}"</h3>
+    <h3>"{{ editName }}"</h3>
     <div>
-      <label>Id: </label>{{crisis.id}}</div>
+      <label>Id: </label>{{ crisis.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="editName" placeholder="name"/>
@@ -74,21 +75,19 @@ export class CrisisDetailComponent implements OnInit {
     private router: Router,
     private route: ActivatedRoute,
     public dialogService: DialogService
-  ) { }
+  ) {}
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
-        let id = +params['id'];
-        this.service.getCrisis(id)
-          .then(crisis => {
-            if (crisis) {
-              this.editName = crisis.name;
-              this.crisis = crisis;
-            } else { // id not found
-              this.gotoCrises();
-            }
-          });
+    this.route.params
+      .switchMap((params: Params) => this.service.getCrisis(params['id']))
+      .subscribe((crisis: Crisis) => {
+        if (crisis) {
+          this.editName = crisis.name;
+          this.crisis = crisis;
+        } else { // id not found
+          this.gotoCrises();
+        }
       });
   }
   // #enddocregion ngOnInit
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
index cda3b7dc6a..d121242a13 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.ts
@@ -11,9 +11,9 @@ import { DialogService }  from '../dialog.service';
 @Component({
   template: `
   <div *ngIf="crisis">
-    <h3>"{{editName}}"</h3>
+    <h3>"{{ editName }}"</h3>
     <div>
-      <label>Id: </label>{{crisis.id}}</div>
+      <label>Id: </label>{{ crisis.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="editName" placeholder="name"/>
@@ -70,14 +70,15 @@ export class CrisisDetailComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     public dialogService: DialogService
-  ) { }
+  ) {}
 
 // #docregion crisis-detail-resolve
   ngOnInit() {
-    this.route.data.forEach((data: { crisis: Crisis }) => {
-      this.editName = data.crisis.name;
-      this.crisis = data.crisis;
-    });
+    this.route.data
+      .subscribe((data: { crisis: Crisis }) => {
+        this.editName = data.crisis.name;
+        this.crisis = data.crisis;
+      });
   }
 // #enddocregion crisis-detail-resolve
 
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
index 80fa3483cd..53b9773212 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.1.ts
@@ -1,49 +1,45 @@
 // #docplaster
 // #docregion
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router }       from '@angular/router';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/switchMap';
+import { Component, OnInit }              from '@angular/core';
+import { ActivatedRoute, Router, Params } from '@angular/router';
 
 import { Crisis, CrisisService } from './crisis.service';
-import { Subscription }          from 'rxjs/Subscription';
+import { Observable }            from 'rxjs/Observable';
 
 @Component({
   // #docregion template
   template: `
     <ul class="items">
-      <li *ngFor="let crisis of crises"
+      <li *ngFor="let crisis of crises | async"
         (click)="onSelect(crisis)">
-        <span class="badge">{{crisis.id}}</span> {{crisis.name}}
+        <span class="badge">{{ crisis.id }}</span> {{ crisis.name }}
       </li>
     </ul>
   `,
   // #enddocregion template
 })
-export class CrisisListComponent implements OnInit, OnDestroy {
-  crises: Crisis[];
+export class CrisisListComponent implements OnInit {
+  crises: Observable<Crisis[]>;
   selectedId: number;
-  private sub: Subscription;
 
   // #docregion relative-navigation-ctor
   constructor(
     private service: CrisisService,
     private route: ActivatedRoute,
-    private router: Router) {}
+    private router: Router
+  ) {}
   // #enddocregion relative-navigation-ctor
 
   ngOnInit() {
-    this.sub = this.route
-      .params
-      .subscribe(params => {
+    this.crises = this.route.params
+      .switchMap((params: Params) => {
         this.selectedId = +params['id'];
-        this.service.getCrises()
-          .then(crises => this.crises = crises);
+        return this.service.getCrises();
       });
   }
 
-  ngOnDestroy() {
-    this.sub.unsubscribe();
-  }
-
   // #docregion select
   onSelect(crisis: Crisis) {
     // Absolute link
diff --git a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
index 350867adbc..2b52f43f57 100644
--- a/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
+++ b/public/docs/_examples/router/ts/app/crisis-center/crisis-list.component.ts
@@ -1,17 +1,20 @@
 // #docplaster
 // #docregion
+import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Router, Params } from '@angular/router';
 
+import { Observable }            from 'rxjs/Observable';
+
 import { Crisis, CrisisService } from './crisis.service';
 
 @Component({
   template: `
     <ul class="items">
-      <li *ngFor="let crisis of crises"
+      <li *ngFor="let crisis of crises | async"
         [class.selected]="isSelected(crisis)"
         (click)="onSelect(crisis)">
-        <span class="badge">{{crisis.id}}</span> {{crisis.name}}
+        <span class="badge">{{ crisis.id }}</span> {{ crisis.name }}
       </li>
     </ul>
 
@@ -19,25 +22,25 @@ import { Crisis, CrisisService } from './crisis.service';
   `
 })
 export class CrisisListComponent implements OnInit {
-  crises: Crisis[];
-  public selectedId: number;
+  crises: Observable<Crisis[]>;
+  selectedId: number;
 
   constructor(
     private service: CrisisService,
     private route: ActivatedRoute,
     private router: Router
-  ) { }
+  ) {}
 
   isSelected(crisis: Crisis) {
     return crisis.id === this.selectedId;
   }
 
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
-      this.selectedId = params['id'];
-      this.service.getCrises()
-        .then(crises => this.crises = crises);
-    });
+    this.crises = this.route.params
+      .switchMap((params: Params) => {
+        this.selectedId = +params['id'];
+        return this.service.getCrises();
+      });
   }
 
   // #docregion relative-navigation
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
index 90d0510bd7..93f0efaf0b 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.1.ts
@@ -1,5 +1,8 @@
 // #docplaster
 // #docregion
+// #docregion rxjs-operator-import
+import 'rxjs/add/operator/switchMap';
+// #enddocregion rxjs-operator-import
 import { Component, OnInit } from '@angular/core';
 // #docregion imports
 import { Router, ActivatedRoute, Params } from '@angular/router';
@@ -11,9 +14,9 @@ import { Hero, HeroService } from './hero.service';
   template: `
   <h2>HEROES</h2>
   <div *ngIf="hero">
-    <h3>"{{hero.name}}"</h3>
+    <h3>"{{ hero.name }}"</h3>
     <div>
-      <label>Id: </label>{{hero.id}}</div>
+      <label>Id: </label>{{ hero.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="hero.name" placeholder="name"/>
@@ -37,14 +40,16 @@ export class HeroDetailComponent implements OnInit  {
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
-      let id = +params['id']; // (+) converts string 'id' to a number
-      this.service.getHero(id).then(hero => this.hero = hero);
-    });
+    this.route.params
+      // (+) converts string 'id' to a number
+      .switchMap((params: Params) => this.service.getHero(+params['id']))
+      .subscribe((hero: Hero) => this.hero = hero);
   }
   // #enddocregion ngOnInit
 
   // #docregion gotoHeroes
-  gotoHeroes() { this.router.navigate(['/heroes']); }
+  gotoHeroes() {
+    this.router.navigate(['/heroes']);
+  }
   // #enddocregion gotoHeroes
 }
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts
index 07b876c79f..c3b69be965 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.2.ts
@@ -9,9 +9,9 @@ import { Hero, HeroService } from './hero.service';
   template: `
   <h2>HEROES</h2>
   <div *ngIf="hero">
-    <h3>"{{hero.name}}"</h3>
+    <h3>"{{ hero.name }}"</h3>
     <div>
-      <label>Id: </label>{{hero.id}}</div>
+      <label>Id: </label>{{ hero.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="hero.name" placeholder="name"/>
@@ -28,15 +28,20 @@ export class HeroDetailComponent implements OnInit  {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private service: HeroService) {}
+    private service: HeroService
+  ) {}
 
   // #docregion snapshot
   ngOnInit() {
     // (+) converts string 'id' to a number
     let id = +this.route.snapshot.params['id'];
-    this.service.getHero(id).then(hero => this.hero = hero);
+
+    this.service.getHero(id)
+      .then((hero: Hero) => this.hero = hero);
   }
   // #enddocregion snapshot
 
-  gotoHeroes() { this.router.navigate(['/heroes']); }
+  gotoHeroes() {
+    this.router.navigate(['/heroes']);
+  }
 }
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
index 42adbe2d98..c528651f44 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-detail.component.ts
@@ -1,5 +1,8 @@
 // #docplaster
 // #docregion
+// #docregion rxjs-operator-import
+import 'rxjs/add/operator/switchMap';
+// #docregion rxjs-operator-import
 // #docregion route-animation-imports
 import { Component, OnInit, HostBinding,
          trigger, transition, animate,
@@ -14,9 +17,9 @@ import { Hero, HeroService }  from './hero.service';
   template: `
   <h2>HEROES</h2>
   <div *ngIf="hero">
-    <h3>"{{hero.name}}"</h3>
+    <h3>"{{ hero.name }}"</h3>
     <div>
-      <label>Id: </label>{{hero.id}}</div>
+      <label>Id: </label>{{ hero.id }}</div>
     <div>
       <label>Name: </label>
       <input [(ngModel)]="hero.name" placeholder="name"/>
@@ -71,15 +74,16 @@ export class HeroDetailComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private router: Router,
-    private service: HeroService) {}
+    private service: HeroService
+  ) {}
   // #enddocregion ctor
 
   // #docregion ngOnInit
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
-       let id = +params['id']; // (+) converts string 'id' to a number
-       this.service.getHero(id).then(hero => this.hero = hero);
-     });
+    this.route.params
+      // (+) converts string 'id' to a number
+      .switchMap((params: Params) => this.service.getHero(+params['id']))
+      .subscribe((hero: Hero) => this.hero = hero);
   }
   // #enddocregion ngOnInit
 
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts
index 0b7298009c..878fef4694 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-list.component.1.ts
@@ -11,25 +11,26 @@ import { Hero, HeroService }   from './hero.service';
   template: `
     <h2>HEROES</h2>
     <ul class="items">
-      <li *ngFor="let hero of heroes"
+      <li *ngFor="let hero of heroes | async"
         (click)="onSelect(hero)">
-        <span class="badge">{{hero.id}}</span> {{hero.name}}
+        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
       </li>
     </ul>
   `
   // #enddocregion template
 })
 export class HeroListComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Promise<Hero[]>;
 
   // #docregion ctor
   constructor(
     private router: Router,
-    private service: HeroService) { }
+    private service: HeroService
+  ) {}
   // #enddocregion ctor
 
   ngOnInit() {
-    this.service.getHeroes().then(heroes => this.heroes = heroes);
+    this.heroes = this.service.getHeroes();
   }
 
   // #docregion select
diff --git a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
index 068c9680d0..ff0378a836 100644
--- a/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
+++ b/public/docs/_examples/router/ts/app/heroes/hero-list.component.ts
@@ -1,6 +1,10 @@
 // #docplaster
 // #docregion
 // TODO SOMEDAY: Feature Componetized like CrisisCenter
+// #docregion rxjs-imports
+import 'rxjs/add/operator/switchMap';
+import { Observable } from 'rxjs/Observable';
+// #enddocregion rxjs-imports
 import { Component, OnInit } from '@angular/core';
 // #docregion import-router
 import { Router, ActivatedRoute, Params } from '@angular/router';
@@ -13,19 +17,19 @@ import { Hero, HeroService }  from './hero.service';
   template: `
     <h2>HEROES</h2>
     <ul class="items">
-      <li *ngFor="let hero of heroes"
+      <li *ngFor="let hero of heroes | async"
         [class.selected]="isSelected(hero)"
         (click)="onSelect(hero)">
-        <span class="badge">{{hero.id}}</span> {{hero.name}}
+        <span class="badge">{{ hero.id }}</span> {{ hero.name }}
       </li>
     </ul>
   `
   // #enddocregion template
 })
+// #docregion ctor
 export class HeroListComponent implements OnInit {
-  heroes: Hero[];
+  heroes: Observable<Hero[]>;
 
-  // #docregion ctor
   private selectedId: number;
 
   constructor(
@@ -36,10 +40,10 @@ export class HeroListComponent implements OnInit {
   // #enddocregion ctor
 
   ngOnInit() {
-    this.route.params.forEach((params: Params) => {
+    this.heroes = this.route.params
+      .switchMap((params: Params) => {
         this.selectedId = +params['id'];
-        this.service.getHeroes()
-          .then(heroes => this.heroes = heroes);
+        return this.service.getHeroes();
       });
   }
   // #enddocregion ctor
@@ -53,6 +57,6 @@ export class HeroListComponent implements OnInit {
     this.router.navigate(['/hero', hero.id]);
   }
   // #enddocregion select
-
+// #docregion ctor
 }
 // #enddocregion
diff --git a/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts b/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts
index 96bf339394..dbee521793 100644
--- a/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts
+++ b/public/docs/_examples/router/ts/app/heroes/heroes-routing.module.ts
@@ -1,18 +1,20 @@
 // #docregion
-import { NgModule }     from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
 
 import { HeroListComponent }    from './hero-list.component';
 import { HeroDetailComponent }  from './hero-detail.component';
 
+const heroesRoutes: Routes = [
+  { path: 'heroes',  component: HeroListComponent },
+// #docregion hero-detail-route
+  { path: 'hero/:id', component: HeroDetailComponent }
+// #enddocregion hero-detail-route
+];
+
 @NgModule({
   imports: [
-    RouterModule.forChild([
-      { path: 'heroes',  component: HeroListComponent },
-    // #docregion hero-detail-route
-      { path: 'hero/:id', component: HeroDetailComponent }
-    // #enddocregion hero-detail-route
-    ])
+    RouterModule.forChild(heroesRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/router/ts/app/login-routing.module.ts b/public/docs/_examples/router/ts/app/login-routing.module.ts
index 43c0e28a97..96d05e7972 100644
--- a/public/docs/_examples/router/ts/app/login-routing.module.ts
+++ b/public/docs/_examples/router/ts/app/login-routing.module.ts
@@ -1,15 +1,17 @@
 // #docregion
-import { NgModule }       from '@angular/core';
-import { RouterModule }   from '@angular/router';
-import { AuthGuard }      from './auth-guard.service';
-import { AuthService }    from './auth.service';
-import { LoginComponent } from './login.component';
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard }            from './auth-guard.service';
+import { AuthService }          from './auth.service';
+import { LoginComponent }       from './login.component';
+
+const loginRoutes: Routes = [
+  { path: 'login', component: LoginComponent }
+];
 
 @NgModule({
   imports: [
-    RouterModule.forChild([
-      { path: 'login', component: LoginComponent }
-    ])
+    RouterModule.forChild(loginRoutes)
   ],
   exports: [
     RouterModule
diff --git a/public/docs/_examples/template-syntax/dart/lib/app_component.dart b/public/docs/_examples/template-syntax/dart/lib/app_component.dart
index 6a3def5aa4..4be7533fcc 100644
--- a/public/docs/_examples/template-syntax/dart/lib/app_component.dart
+++ b/public/docs/_examples/template-syntax/dart/lib/app_component.dart
@@ -7,7 +7,8 @@ import 'package:angular2/common.dart';
 
 import 'hero.dart';
 import 'hero_detail_component.dart';
-import 'my_click_directive.dart';
+import 'click_directive.dart';
+import 'sizer_component.dart';
 
 enum Color { red, green, blue }
 
@@ -18,7 +19,8 @@ enum Color { red, green, blue }
       HeroDetailComponent,
       BigHeroDetailComponent,
       MyClickDirective,
-      MyClickDirective2
+      MyClickDirective2,
+      MySizerComponent
     ])
 class AppComponent implements OnInit, AfterViewInit {
   @override
@@ -165,6 +167,7 @@ class AppComponent implements OnInit, AfterViewInit {
   bool isItalic = false;
   bool isBold = false;
   String fontSize = 'large';
+  String fontSizePx = '14';
 
   Map<String, String> setStyle() {
     return {
diff --git a/public/docs/_examples/template-syntax/dart/lib/app_component.html b/public/docs/_examples/template-syntax/dart/lib/app_component.html
index 9fd72765ed..3255a02ff6 100644
--- a/public/docs/_examples/template-syntax/dart/lib/app_component.html
+++ b/public/docs/_examples/template-syntax/dart/lib/app_component.html
@@ -14,7 +14,7 @@
 </div>
 <br>
 <a href="#event-binding">Event Binding</a><br>
-
+<a href="#two-way">Two-way Binding</a><br>
 <br>
 <div>Directives</div>
 <div style="margin-left:8px">
@@ -242,9 +242,6 @@ button</button>
 
   <button [attr.disabled]="!isUnchanged">Disabled as well</button>
 
-  <!-- can't remove it with [attr.disabled] either -->
-  <button disabled [attr.disabled]>Still disabled</button>
-
   <!-- we'd have to remove it with property binding -->
   <button disabled [disabled]="false">Enabled (but inert)</button>
 </div>
@@ -262,7 +259,7 @@ button</button>
 <!-- #docregion class-binding-2 -->
 <!-- reset/override all class names with a binding  -->
 <div class="bad curly special"
-     [className]="badCurly">Bad curly</div>
+     [class]="badCurly">Bad curly</div>
 <!-- #enddocregion class-binding-2 -->
 
 <!-- #docregion class-binding-3 -->
@@ -309,9 +306,9 @@ button</button>
 <div>
 <!-- #docregion event-binding-3 -->
 <!-- `myClick` is an event on the custom `MyClickDirective` -->
-<!-- #docregion my-click -->
+<!-- #docregion myClick -->
 <div (myClick)="clickMessage=$event">click with myClick</div>
-<!-- #enddocregion my-click -->
+<!-- #enddocregion myClick -->
 <!-- #enddocregion event-binding-3 -->
 {{clickMessage}}
 </div>
@@ -349,6 +346,24 @@ button</button>
 </div>
 <!-- #enddocregion event-binding-propagation -->
 <br><br>
+<a class="to-toc" href="#toc">top</a>
+
+<hr><h2 id="two-way">Two-way Binding</h2>
+<div id="two-way-1">
+  <!-- #docregion two-way-1 -->
+  <my-sizer [(size)]="fontSizePx"></my-sizer>
+  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
+  <!-- #enddocregion two-way-1 -->
+  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
+</div>
+<br>
+<div id="two-way-2">
+  <h3>De-sugared two-way binding</h3>
+  <!-- #docregion two-way-2 -->
+  <my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>
+  <!-- #enddocregion two-way-2 -->
+</div>
+<br><br>
 
 <a class="to-toc" href="#toc">top</a>
 
@@ -746,7 +761,7 @@ bindon-ngModel
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{product['price'] | currency:'USD':false}}
+  <label>Price: </label>{{product['price'] | currency:'USD':true}}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
diff --git a/public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart b/public/docs/_examples/template-syntax/dart/lib/click_directive.dart
similarity index 81%
rename from public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart
rename to public/docs/_examples/template-syntax/dart/lib/click_directive.dart
index 0980478f29..101b9eb5c6 100644
--- a/public/docs/_examples/template-syntax/dart/lib/my_click_directive.dart
+++ b/public/docs/_examples/template-syntax/dart/lib/click_directive.dart
@@ -5,11 +5,11 @@ import 'package:angular2/core.dart';
 
 @Directive(selector: '[myClick]')
 class MyClickDirective {
-  // #docregion my-click-output-1
+  // #docregion output-myClick
   // @Output(alias) [type info] propertyName = ...
   @Output('myClick') final EventEmitter clicks = new EventEmitter<String>();
 
-  // #enddocregion my-click-output-1
+  // #enddocregion output-myClick
   bool _toggle = false;
 
   MyClickDirective(ElementRef el) {
@@ -21,14 +21,14 @@ class MyClickDirective {
   }
 }
 
-// #docregion my-click-output-2
+// #docregion output-myClick2
 @Directive(
-// #enddocregion my-click-output-2
+// #enddocregion output-myClick2
     selector: '[myClick2]',
-// #docregion my-click-output-2
+// #docregion output-myClick2
     // ...
     outputs: const ['clicks:myClick']) // propertyName:alias
-// #enddocregion my-click-output-2
+// #enddocregion output-myClick2
 class MyClickDirective2 {
   final EventEmitter clicks = new EventEmitter<String>();
   bool _toggle = false;
diff --git a/public/docs/_examples/template-syntax/dart/lib/sizer_component.dart b/public/docs/_examples/template-syntax/dart/lib/sizer_component.dart
new file mode 100644
index 0000000000..84dbc1d9ff
--- /dev/null
+++ b/public/docs/_examples/template-syntax/dart/lib/sizer_component.dart
@@ -0,0 +1,30 @@
+// #docregion
+import 'dart:math';
+import 'package:angular2/core.dart';
+
+@Component(
+    selector: 'my-sizer',
+    template: '''
+      <div>
+        <button (click)="dec()" title="smaller">-</button>
+        <button (click)="inc()" title="bigger">+</button>
+        <label [style.font-size.px]="size">FontSize: {{size}}px</label>
+      </div>''')
+class MySizerComponent {
+  static final defaultPxSize = 14;
+
+  @Input()
+  String size;
+
+  @Output()
+  var sizeChange = new EventEmitter<String>();
+
+  void dec() => resize(-1);
+  void inc() => resize(1);
+
+  void resize(num delta) {
+    final numSize = num.parse(size, (_) => defaultPxSize);
+    size = min(40, max(8, numSize + delta)).toString();
+    sizeChange.emit(size);
+  }
+}
diff --git a/public/docs/_examples/template-syntax/e2e-spec.ts b/public/docs/_examples/template-syntax/e2e-spec.ts
index b8621c4d2d..71f1c58165 100644
--- a/public/docs/_examples/template-syntax/e2e-spec.ts
+++ b/public/docs/_examples/template-syntax/e2e-spec.ts
@@ -31,14 +31,13 @@ describe('Template Syntax', function () {
     expect(specialButtonEle.getAttribute('style')).toMatch('color: red');
   });
 
-  it('should two-way bind to sizer', function () {
-    let buttons = element.all(by.css('div#two-way-1 my-sizer button'));
-    let input = element(by.css('input#fontsize'));
-
-    input.getAttribute('value').then(size => {
-      buttons.get(1).click();
-      browser.waitForAngular();
-      expect(input.getAttribute('value')).toEqual((+size + 1).toString());
-    });
+  it('should two-way bind to sizer', async () => {
+    let div = element(by.css('div#two-way-1'));
+    let incButton = div.element(by.buttonText('+'));
+    let input = div.element(by.css('input'));
+    let initSize = await input.getAttribute('value');
+    incButton.click();
+    expect(input.getAttribute('value')).toEqual((+initSize + 1).toString());
   });
 });
+
diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.html b/public/docs/_examples/template-syntax/ts/app/app.component.html
index d844154f58..30a80412c7 100644
--- a/public/docs/_examples/template-syntax/ts/app/app.component.html
+++ b/public/docs/_examples/template-syntax/ts/app/app.component.html
@@ -305,10 +305,10 @@ button</button>
 
 <div>
 <!-- #docregion event-binding-3 -->
-<!-- `myClick` is an event on the custom `MyClickDirective` -->
-<!-- #docregion my-click -->
+<!-- `myClick` is an event on the custom `ClickDirective` -->
+<!-- #docregion myClick -->
 <div (myClick)="clickMessage=$event">click with myClick</div>
-<!-- #enddocregion my-click -->
+<!-- #enddocregion myClick -->
 <!-- #enddocregion event-binding-3 -->
 {{clickMessage}}
 </div>
@@ -351,21 +351,22 @@ button</button>
 <hr><h2 id="two-way">Two-way Binding</h2>
 <div id="two-way-1">
   <!-- #docregion two-way-1 -->
-  <my-sizer [(size)]="fontSize"></my-sizer>
-  <div [style.font-size.px]="fontSize">Resizable Text</div>
+  <my-sizer [(size)]="fontSizePx"></my-sizer>
+  <div [style.font-size.px]="fontSizePx">Resizable Text</div>
   <!-- #enddocregion two-way-1 -->
-  <label>FontSize: <input id="fontsize" [(ngModel)]="fontSize"></label>
+  <label>FontSize (px): <input [(ngModel)]="fontSizePx"></label>
 </div>
 <br>
 <div id="two-way-2">
   <h3>De-sugared two-way binding</h3>
   <!-- #docregion two-way-2 -->
-  <my-sizer [size]="fontSize" (sizeChange)="fontSize=$event"></my-sizer>
+  <my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>
   <!-- #enddocregion two-way-2 -->
 </div>
 <br><br>
 
 <a class="to-toc" href="#toc">top</a>
+
 <!-- Two way data binding unwound;
     passing the changed display value to the event handler via `$event` -->
 <hr><h2 id="ngModel">NgModel (two-way) Binding</h2>
@@ -428,6 +429,18 @@ bindon-ngModel
 <!-- NgStyle binding -->
 <hr><h2 id="ngStyle">NgStyle Binding</h2>
 
+<!-- #docregion NgStyle -->
+<div>
+  <p [ngStyle]="setStyle()" #styleP>Change style of this text!</p>
+
+  <label>Italic: <input type="checkbox" [(ngModel)]="isItalic"></label> |
+  <label>Bold: <input type="checkbox" [(ngModel)]="isBold"></label> |
+  <label>Size: <input type="text" [(ngModel)]="fontSize"></label>
+
+  <p>Style set to: <code>'{{styleP.style.cssText}}'</code></p>
+</div>
+<!-- #enddocregion NgStyle -->
+
 <!-- #docregion NgStyle-1 -->
 <div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" >
   This div is x-large.
diff --git a/public/docs/_examples/template-syntax/ts/app/app.component.ts b/public/docs/_examples/template-syntax/ts/app/app.component.ts
index 072c634162..77221587a7 100644
--- a/public/docs/_examples/template-syntax/ts/app/app.component.ts
+++ b/public/docs/_examples/template-syntax/ts/app/app.component.ts
@@ -50,8 +50,6 @@ export class AppComponent implements AfterViewInit, OnInit {
     this.alert('Deleted hero: ' + (hero && hero.firstName));
   }
 
-  fontSize = 10;
-
   // #docregion evil-title
   evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';
   // #enddocregion evil-title
@@ -180,6 +178,21 @@ export class AppComponent implements AfterViewInit, OnInit {
   }
   // #enddocregion setStyles
 
+  // #docregion NgStyle
+  isItalic = false;
+  isBold = false;
+  fontSize: string = 'large';
+  fontSizePx: number | string = 14;
+
+  setStyle() {
+    return {
+      'font-style': this.isItalic ? 'italic' : 'normal',
+      'font-weight': this.isBold ? 'bold' : 'normal',
+      'font-size': this.fontSize
+    };
+  }
+  // #enddocregion NgStyle
+
   toeChoice = '';
   toeChooser(picker: HTMLFieldSetElement) {
     let choices = picker.children;
diff --git a/public/docs/_examples/template-syntax/ts/app/app.module.ts b/public/docs/_examples/template-syntax/ts/app/app.module.ts
index db940fad08..712b613daf 100644
--- a/public/docs/_examples/template-syntax/ts/app/app.module.ts
+++ b/public/docs/_examples/template-syntax/ts/app/app.module.ts
@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { BigHeroDetailComponent, HeroDetailComponent } from './hero-detail.component';
-import { MyClickDirective, MyClickDirective2 } from './my-click.directive';
+import { ClickDirective, ClickDirective2 } from './click.directive';
 import { SizerComponent } from './sizer.component';
 
 @NgModule({
@@ -16,8 +16,8 @@ import { SizerComponent } from './sizer.component';
     AppComponent,
     BigHeroDetailComponent,
     HeroDetailComponent,
-    MyClickDirective,
-    MyClickDirective2,
+    ClickDirective,
+    ClickDirective2,
     SizerComponent
   ],
   bootstrap: [ AppComponent ]
diff --git a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts b/public/docs/_examples/template-syntax/ts/app/click.directive.ts
similarity index 76%
rename from public/docs/_examples/template-syntax/ts/app/my-click.directive.ts
rename to public/docs/_examples/template-syntax/ts/app/click.directive.ts
index 1f552277bf..09757bfeaf 100644
--- a/public/docs/_examples/template-syntax/ts/app/my-click.directive.ts
+++ b/public/docs/_examples/template-syntax/ts/app/click.directive.ts
@@ -3,10 +3,10 @@
 import { Directive, ElementRef, EventEmitter, Output } from '@angular/core';
 
 @Directive({selector: '[myClick]'})
-export class MyClickDirective {
-  // #docregion my-click-output-1
+export class ClickDirective {
+  // #docregion output-myClick
   @Output('myClick') clicks = new EventEmitter<string>(); //  @Output(alias) propertyName = ...
- // #enddocregion my-click-output-1
+ // #enddocregion output-myClick
 
   toggle = false;
 
@@ -19,15 +19,15 @@ export class MyClickDirective {
   }
 }
 
-// #docregion my-click-output-2
+// #docregion output-myClick2
 @Directive({
-// #enddocregion my-click-output-2
+  // #enddocregion output-myClick2
   selector: '[myClick2]',
-// #docregion my-click-output-2
+  // #docregion output-myClick2
   outputs: ['clicks:myClick']  // propertyName:alias
 })
-// #enddocregion my-click-output-2
-export class MyClickDirective2 {
+// #enddocregion output-myClick2
+export class ClickDirective2 {
   clicks = new EventEmitter<string>();
   toggle = false;
 
diff --git a/public/docs/_examples/template-syntax/ts/app/sizer.component.ts b/public/docs/_examples/template-syntax/ts/app/sizer.component.ts
index cf0ef4af47..b6065c8cd1 100644
--- a/public/docs/_examples/template-syntax/ts/app/sizer.component.ts
+++ b/public/docs/_examples/template-syntax/ts/app/sizer.component.ts
@@ -11,15 +11,14 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   </div>`
 })
 export class SizerComponent {
-  @Input()  size: number;
+  @Input()  size: number | string;
   @Output() sizeChange = new EventEmitter<number>();
 
   dec() { this.resize(-1); }
   inc() { this.resize(+1); }
 
   resize(delta: number) {
-    const size = +this.size + delta;
-    this.size = Math.min(40, Math.max(8, size));
+    this.size = Math.min(40, Math.max(8, +this.size + delta));
     this.sizeChange.emit(this.size);
   }
 }
diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
index bc2293cec1..1731bf4d0e 100644
--- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.dart
@@ -4,21 +4,27 @@
 import 'dart:async';
 
 import 'package:angular2/core.dart';
+// #docregion import-router
+import 'package:angular2/router.dart';
+// #enddocregion import-router
 
 import 'hero.dart';
 import 'hero_service.dart';
 // #enddocregion imports
 
+// #docregion metadata
 @Component(
     selector: 'my-dashboard',
     // #docregion templateUrl
     templateUrl: 'dashboard_component.html',
     // #enddocregion templateUrl
     // #docregion css
-    styleUrls: const ['dashboard_component.css']
+    styleUrls: const ['dashboard_component.css'],
     // #enddocregion css
+    directives: const [ROUTER_DIRECTIVES],
     )
-// #docregion component
+// #enddocregion metadata
+// #docregion class, component
 class DashboardComponent implements OnInit {
   List<Hero> heroes;
 
@@ -26,11 +32,9 @@ class DashboardComponent implements OnInit {
   final HeroService _heroService;
 
   DashboardComponent(this._heroService);
-
   // #enddocregion ctor
 
   Future<Null> ngOnInit() async {
     heroes = (await _heroService.getHeroes()).skip(1).take(4).toList();
   }
 }
-// #enddocregion component
diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.html b/public/docs/_examples/toh-5/dart/lib/dashboard_component.html
index 49e77c460c..f48c102949 100644
--- a/public/docs/_examples/toh-5/dart/lib/dashboard_component.html
+++ b/public/docs/_examples/toh-5/dart/lib/dashboard_component.html
@@ -2,7 +2,7 @@
 <h3>Top Heroes</h3>
 <div class="grid grid-pad">
   <!-- #docregion click -->
-  <a *ngFor="let hero of heroes"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
+  <a *ngFor="let hero of heroes" [routerLink]="['./HeroDetail', {id: hero.id}]" class="col-1-4">
   <!-- #enddocregion click -->
     <div class="module hero">
       <h4>{{hero.name}}</h4>
diff --git a/public/docs/_examples/toh-5/dart/lib/dashboard_component.1.html b/public/docs/_examples/toh-5/dart/lib/dashboard_component_1.html
similarity index 100%
rename from public/docs/_examples/toh-5/dart/lib/dashboard_component.1.html
rename to public/docs/_examples/toh-5/dart/lib/dashboard_component_1.html
diff --git a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
index a99528cbaa..df03c092f3 100644
--- a/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/hero_detail_component.dart
@@ -2,12 +2,12 @@
 // #docregion , v2
 // #docregion added-imports
 import 'dart:async';
-import 'dart:html' show window;
 
 // #enddocregion added-imports
 import 'package:angular2/core.dart';
 // #docregion added-imports
 import 'package:angular2/router.dart';
+import 'package:angular2/platform/common.dart';
 
 // #enddocregion added-imports
 import 'hero.dart';
@@ -17,9 +17,9 @@ import 'hero_service.dart';
 
 @Component(
     selector: 'my-hero-detail',
-    // #docregion templateUrl
+    // #docregion metadata, templateUrl
     templateUrl: 'hero_detail_component.html',
-    // #enddocregion templateUrl, v2
+    // #enddocregion metadata, templateUrl, v2
     styleUrls: const ['hero_detail_component.css']
     // #docregion v2
     )
@@ -30,8 +30,9 @@ class HeroDetailComponent implements OnInit {
   // #docregion ctor
   final HeroService _heroService;
   final RouteParams _routeParams;
+  final Location _location;
 
-  HeroDetailComponent(this._heroService, this._routeParams);
+  HeroDetailComponent(this._heroService, this._routeParams, this._location);
   // #enddocregion ctor
 
   // #docregion ngOnInit
@@ -44,7 +45,7 @@ class HeroDetailComponent implements OnInit {
 
   // #docregion goBack
   void goBack() {
-    window.history.back();
+    _location.back();
   }
   // #enddocregion goBack
 }
diff --git a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
index e19c3ab3be..2e0eddd076 100644
--- a/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
+++ b/public/docs/_examples/toh-5/dart/lib/heroes_component.dart
@@ -41,9 +41,11 @@ class HeroesComponent implements OnInit {
     selectedHero = hero;
   }
 
+  // #docregion gotoDetail
   Future<Null> gotoDetail() => _router.navigate([
         'HeroDetail',
         {'id': selectedHero.id.toString()}
       ]);
+  // #enddocregion gotoDetail
   // #docregion renaming
 }
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts
index 430a30ebbe..3c92b205c8 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.1.ts
@@ -6,4 +6,3 @@ import { Component } from '@angular/core';
   template: '<h3>My Dashboard</h3>'
 })
 export class DashboardComponent { }
-
diff --git a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
index cb5cfc5b82..9311a74395 100644
--- a/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/dashboard.component.ts
@@ -33,4 +33,3 @@ export class DashboardComponent implements OnInit {
       .then(heroes => this.heroes = heroes.slice(1, 5));
   }
 }
-// #enddocregion class
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
index cf96fc2169..8f2ff9d90c 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.html
@@ -11,4 +11,4 @@
   <!-- #docregion back-button -->
   <button (click)="goBack()">Back</button>
   <!-- #enddocregion back-button -->
-</div>
\ No newline at end of file
+</div>
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
index 3ca01d2361..3557aa31d5 100644
--- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
@@ -1,5 +1,7 @@
 // #docplaster
-// #docregion , v2
+// #docregion , v2, rxjs-import
+import 'rxjs/add/operator/switchMap';
+// #enddocregion rxjs-import
 import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Location }               from '@angular/common';
@@ -31,11 +33,9 @@ export class HeroDetailComponent implements OnInit {
 
   // #docregion ngOnInit
   ngOnInit(): void {
-    this.route.params.forEach((params: Params) => {
-      let id = +params['id'];
-      this.heroService.getHero(id)
-        .then(hero => this.hero = hero);
-    });
+    this.route.params
+      .switchMap((params: Params) => this.heroService.getHero(+params['id']))
+      .subscribe(hero => this.hero = hero);
   }
   // #enddocregion ngOnInit
 
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
index 001b34baf7..a0342415f2 100644
--- a/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
@@ -1,4 +1,5 @@
 // #docregion
+import 'rxjs/add/operator/switchMap';
 import { Component, OnInit }      from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Location }               from '@angular/common';
@@ -22,11 +23,9 @@ export class HeroDetailComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.route.params.forEach((params: Params) => {
-      let id = +params['id'];
-      this.heroService.getHero(id)
-        .then(hero => this.hero = hero);
-    });
+    this.route.params
+      .switchMap((params: Params) => this.heroService.getHero(+params['id']))
+      .subscribe(hero => this.hero = hero);
   }
 
   // #docregion save
diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts
index 091a7d82a7..961a226688 100644
--- a/public/docs/_examples/toh-6/ts/app/main.ts
+++ b/public/docs/_examples/toh-6/ts/app/main.ts
@@ -1,6 +1,6 @@
 // #docregion
-// main entry point
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json
index ed36c0f33f..553ca9338a 100644
--- a/public/docs/_examples/webpack/ts/package.webpack.json
+++ b/public/docs/_examples/webpack/ts/package.webpack.json
@@ -14,14 +14,14 @@
     }
   ],
   "dependencies": {
-    "@angular/common": "~2.1.1",
-    "@angular/compiler": "~2.1.1",
-    "@angular/core": "~2.1.1",
-    "@angular/forms": "~2.1.1",
-    "@angular/http": "~2.1.1",
-    "@angular/platform-browser": "~2.1.1",
-    "@angular/platform-browser-dynamic": "~2.1.1",
-    "@angular/router": "~3.1.1",
+    "@angular/common": "~2.2.0",
+    "@angular/compiler": "~2.2.0",
+    "@angular/core": "~2.2.0",
+    "@angular/forms": "~2.2.0",
+    "@angular/http": "~2.2.0",
+    "@angular/platform-browser": "~2.2.0",
+    "@angular/platform-browser-dynamic": "~2.2.0",
+    "@angular/router": "~3.2.0",
     "core-js": "^2.4.1",
     "rxjs": "5.0.0-beta.12",
     "zone.js": "^0.6.25"
diff --git a/public/docs/dart/latest/cookbook/_data.json b/public/docs/dart/latest/cookbook/_data.json
index a747acd83f..eb1a46ace4 100644
--- a/public/docs/dart/latest/cookbook/_data.json
+++ b/public/docs/dart/latest/cookbook/_data.json
@@ -60,7 +60,7 @@
 
   "ts-to-js": {
     "title": "TypeScript to JavaScript",
-    "intro": "Convert Angular TypeScript examples into ES5 JavaScript",
+    "intro": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript",
     "hide": true
   },
 
diff --git a/public/docs/dart/latest/guide/forms.jade b/public/docs/dart/latest/guide/forms.jade
index f122411f16..a2d1feb8fa 100644
--- a/public/docs/dart/latest/guide/forms.jade
+++ b/public/docs/dart/latest/guide/forms.jade
@@ -96,12 +96,6 @@ figure.image-display
 
 +makeTabs('forms/dart/pubspec.yaml, forms/dart/web/index.html, forms/dart/web/main.dart', ',initial,', 'pubspec.yaml, web/index.html, web/main.dart')
 
-.l-sub-section
-  :marked
-    Note the `platform_directives` entry in `pubspec.yaml`.
-    It imports core directives and, more importantly for this chapter,
-    **form directives**.
-
 :marked
   So that the code can run,
   let's create a stub for the `<hero-form>` component.
diff --git a/public/docs/dart/latest/guide/glossary.jade b/public/docs/dart/latest/guide/glossary.jade
index 1d2eb49664..ff49e787f0 100644
--- a/public/docs/dart/latest/guide/glossary.jade
+++ b/public/docs/dart/latest/guide/glossary.jade
@@ -1,4 +1,4 @@
 extends ../glossary
 
-block var-def
+block includes
   include ../_util-fns
diff --git a/public/docs/dart/latest/guide/template-syntax.jade b/public/docs/dart/latest/guide/template-syntax.jade
index bee8fc97a7..fe62bd9084 100644
--- a/public/docs/dart/latest/guide/template-syntax.jade
+++ b/public/docs/dart/latest/guide/template-syntax.jade
@@ -48,16 +48,6 @@ block dart-type-exception-example
       In checked mode, the code above will result in a type exception: 
       `String` isn't a subtype of `Hero`.
 
-block dart-class-binding-bug
-  .callout.is-helpful
-    header Angular Issue #6901
-    :marked
-      Issue [#6901][6901] prevents us from using `[class]`. As is illustrated
-      above, in the meantime we can achieve the same effect by binding to
-      `className`.
-      
-      [6901]: http://github.com/angular/angular/issues/6901
-
 block style-property-name-dart-diff
   .callout.is-helpful
     header Dart difference: Style property names
diff --git a/public/docs/dart/latest/tutorial/toh-pt1.jade b/public/docs/dart/latest/tutorial/toh-pt1.jade
index 218d35c788..9bdb15fa08 100644
--- a/public/docs/dart/latest/tutorial/toh-pt1.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt1.jade
@@ -1,8 +1,6 @@
 include ../_util-fns
 
 :marked
-  # Once Upon a Time
-
   Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends.
 
 :marked
diff --git a/public/docs/dart/latest/tutorial/toh-pt2.jade b/public/docs/dart/latest/tutorial/toh-pt2.jade
index 24e38e31b3..e5c78afdec 100644
--- a/public/docs/dart/latest/tutorial/toh-pt2.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt2.jade
@@ -1,7 +1,6 @@
 include ../_util-fns
 
 :marked
-  # It Takes Many Heroes
   Our story needs more heroes.
   We’ll expand our Tour of Heroes app to display a list of heroes,
   allow the user to select a hero, and display the hero’s details.
diff --git a/public/docs/dart/latest/tutorial/toh-pt4.jade b/public/docs/dart/latest/tutorial/toh-pt4.jade
index cc417c159e..a9d5ca86e2 100644
--- a/public/docs/dart/latest/tutorial/toh-pt4.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt4.jade
@@ -1,7 +1,6 @@
 include ../_util-fns
 
 :marked
-  # Services
   The Tour of Heroes is evolving and we anticipate adding more components in the near future.
 
   Multiple components will need access to hero data and we don't want to copy and
diff --git a/public/docs/dart/latest/tutorial/toh-pt5.jade b/public/docs/dart/latest/tutorial/toh-pt5.jade
index 6be571c148..9ce3e7ed7b 100644
--- a/public/docs/dart/latest/tutorial/toh-pt5.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt5.jade
@@ -96,12 +96,13 @@ block redirect-vs-use-as-default
     router will display the dashboard when the browser URL doesn't match an existing route.
 
 block templateUrl-path-resolution
-  :marked
-    The value of `templateUrl` can be an [asset][] in this package or another
-    package. To use an asset in another package, use a full package reference,
-    such as `'package:some_other_package/dashboard_component.html'`.
+  .l-sub-section
+    :marked
+      The value of `templateUrl` can be an [asset][] in this package or another
+      package. To use an asset in another package, use a full package reference,
+      such as `'package:some_other_package/dashboard_component.html'`.
 
-    [asset]: https://www.dartlang.org/tools/pub/glossary#asset
+      [asset]: https://www.dartlang.org/tools/pub/glossary#asset
 
 block route-params
   :marked
diff --git a/public/docs/js/latest/_data.json b/public/docs/js/latest/_data.json
index d3fff22a9c..18ed3ed0bd 100644
--- a/public/docs/js/latest/_data.json
+++ b/public/docs/js/latest/_data.json
@@ -4,7 +4,7 @@
     "title": "Angular Docs",
     "subtitle": "JavaScript",
     "menuTitle": "Docs Home",
-    "banner": "Angular release is <b>2.1</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>change log</a> to see enhancements, fixes, and breaking changes."
+    "banner": "The latest Angular release is <b>2.2</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>change log</a> to see enhancements, fixes, and breaking changes."
   },
 
   "quickstart": {
diff --git a/public/docs/js/latest/cookbook/_data.json b/public/docs/js/latest/cookbook/_data.json
index 3f319736d6..74ee2a0be9 100644
--- a/public/docs/js/latest/cookbook/_data.json
+++ b/public/docs/js/latest/cookbook/_data.json
@@ -55,7 +55,7 @@
 
   "ts-to-js": {
     "title": "TypeScript to JavaScript",
-    "intro": "Convert Angular TypeScript examples into ES5 JavaScript"
+    "intro": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript"
   },
 
   "visual-studio-2015": {
diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade
index a76d90bce7..77e3f9b7d6 100644
--- a/public/docs/js/latest/cookbook/ts-to-js.jade
+++ b/public/docs/js/latest/cookbook/ts-to-js.jade
@@ -1,469 +1 @@
-include ../../../../_includes/_util-fns
-
-:marked
-  Everything that we can do in Angular in TypeScript, we can also do
-  in JavaScript. Translating from one language to the other is mostly a
-  matter of changing the way we organize our code and the way we access
-  Angular APIs.
-
-  Since TypeScript is a popular language option in Angular, many of the
-  code examples you see on the Internet as well as on this site are written
-  in TypeScript. This cookbook contains recipes for translating these kinds of
-  code examples to ES5, so that they can be applied to Angular JavaScript
-  applications.
-
-<a id="toc"></a>
-:marked
-  ## Table of contents
-
-  [Modularity: imports and exports](#modularity)
-
-  [Classes and Class Metadata](#class-metadata)
-  
-  [Input and Output Metadata](#property-metadata)
-  
-  [Dependency Injection](#dependency-injection)
-  
-  [Host and Query Metadata](#other-property-metadata)
-
-  **Run and compare the live <live-example name="cb-ts-to-js">TypeScript</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
-  code shown in this cookbook.**
-
-a(id="modularity")
-.l-main-section
-:marked
-  ## Importing and Exporting
-
-- var top="vertical-align:top"
-table(width="100%")
-  col(width="50%")
-  col(width="50%")
-  tr
-    th TypeScript
-    th ES5 JavaScript
-  tr(style=top)
-    td
-      :marked
-        ### Importing Angular Code
-
-        In TypeScript code, Angular classes, functions, and other members
-        are imported with TypeScript `import` statements:
-
-      +makeExample('cb-ts-to-js/ts/app/main.ts', 'ng2import')(format="." )
-
-    td
-      :marked
-        ### Accessing Angular Code through the ng global
-
-        In JavaScript code, when using
-        [the Angular packages](../glossary.html#!#scoped-package),
-        we can access Angular code through the global `ng` object. In the
-        nested members of this object we'll find everything we would import
-        from `@angular` in TypeScript:
-
-      +makeExample('cb-ts-to-js/js/app/main.js', 'ng2import')(format="." )
-
-  tr(style=top)
-    td
-      :marked
-        ### Importing and Exporting Application Code
-
-        Each file in an Angular TypeScript application constitutes a
-        TypeScript module. When we want to make something from a module available
-        to other modules, we `export` it.
-
-      +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'appexport')(format="." )
-
-      :marked
-        In other modules we can then `import` things that have been exported
-        elsewhere.
-
-      +makeExample('cb-ts-to-js/ts/app/main.ts', 'appimport')(format="." )
-
-    td
-      :marked
-        ### Sharing Application Code
-
-        In an Angular JavaScript application, we load each file to the page
-        using a `<script>` tag. Each file can make things available to other
-        files via the shared global `window` scope.
-
-        We often introduce an application namespace
-        object (such as `"app"`) onto `window` and attach everything we need
-        to share to that namespace object. 
-        We also wrap our code in an 
-        [Immediately Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression).
-        These practices together prevent our code from
-        polluting the global scope.
-
-      +makeExample('cb-ts-to-js/js/app/hero.component.js', 'appexport')(format="." )
-
-      :marked
-        We can then access anything from this shared namespace in
-        other files.
-
-      +makeExample('cb-ts-to-js/js/app/main.js', 'appimport')(format="." )
-
-      :marked
-        Note that the order of `<script>` tags on the page is significant. 
-        We must load a file that defines a shared member before
-        a file that uses that member.
-
-.alert.is-helpful
-  :marked
-    Alternatively, we can use a module loader such as Webpack or
-    Browserify in an Angular JavaScript project. In such a project, we would
-    use CommonJS modules and the `require` function to load Angular framework code.
-    We would then use `module.exports` and `require` to export and import application
-    code.
-
-
-a(id="class-metadata")
-.l-main-section
-:marked
-  ## Classes and Class Metadata
-
-- var top="vertical-align:top"
-table(width="100%")
-  col(width="50%")
-  col(width="50%") 
-  tr
-    th TypeScript
-    th ES5 JavaScript
-  tr(style=top)
-    td
-      :marked
-        ### Classes
-
-        We put most of our Angular TypeScript code into TypeScript classes.
-
-      +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'class')(format="." )
-
-    td
-      :marked
-        ### Constructors and Prototypes
-
-        ES5 JavaScript has no classes. We use the constructor
-        pattern instead which works with Angular as well as classes do.
-
-      +makeExample('cb-ts-to-js/js/app/hero.component.js', 'constructorproto')(format="." )
-
-  tr(style=top)
-    td
-      :marked
-        ### Metadata with Decorators
-
-        Most Angular classes have one or more TypeScript *decorators*
-        attached to provide configuration and metadata. For example,
-        a component must have a [`@Component`](../api/core/index/Component-decorator.html) decorator.
-
-      +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'metadata')(format="." )
-
-    td
-      :marked
-        ### Metadata with the Annotations Array
-
-        In JavaScript, we can attach an `annotations` array to a constructor
-        to provide metadata. 
-        Each item in the array corresponds to a TypeScript decorator.
-
-        In the following example, we create a new instance of `Component` that corresponds
-        to the [`@Component`](../api/core/index/Component-decorator.html) TypeScript decorator.
-
-      +makeExample('cb-ts-to-js/js/app/hero.component.js', 'metadata')(format="." )
-
-      :marked
-        ### Metadata with The Class Convenience API
-
-        The pattern of creating a constructor and decorating it with metadata
-        is so common that Angular provides an alternative convenience API for it.
-        This API lets us define everything in a single expression.
-
-        With this API we first call the `ng.core.Component` function,
-        followed by a chained `Class` method call. The argument to `Class`
-        is an object that defines the constructor and the instance methods
-        of the component:
-
-      +makeExample('cb-ts-to-js/js/app/hero-dsl.component.js', 'component')(format="." )
-
-      :marked
-        Similar APIs are also available for other decorators. You can define a
-        directive:
-        
-      code-example.
-        var MyDirective = ng.core.Directive({
-          ...
-        }).Class({
-          ...
-        });
-      
-      :marked
-        Or a pipe:
-        
-      code-example.
-        var MyPipe = ng.core.Pipe({
-          name: 'myPipe'
-        }).Class({
-          ...
-        });
-
-  tr(style=top)
-    td
-      :marked
-        ### Interfaces
-
-        When defining classes that need to implement a certain method, it
-        is common to use TypeScript interfaces that enforce that the 
-        method signature is correct. Component lifecycle methods like `ngOnInit`
-        are one example of this pattern. `ngOnInit` is defined in the `OnInit`
-        interface.
-
-      +makeExample('cb-ts-to-js/ts/app/hero-lifecycle.component.ts')(format="." )
-
-    td
-      :marked
-        ### Implementing Methods without Interfaces
-
-        TypeScript interfaces are purely for developer convenience
-        and are not used by Angular at runtime. This means that in JavaScript
-        code we don't need to substitute anything for interfaces. We can just
-        implement the methods.
-
-      +makeExample('cb-ts-to-js/js/app/hero-lifecycle.component.js')(format="." )
-
-a(id="property-metadata")
-.l-main-section
-:marked
-  ## Input and Output Metadata
-
-- var top="vertical-align:top"
-table(width="100%")
-  col(width="50%")
-  col(width="50%") 
-  tr
-    th TypeScript
-    th ES5 JavaScript
-  tr(style=top)
-    td
-      :marked
-        ### Input and Output Decorators
-
-        In TypeScript, property decorators are often used to provide additional metadata
-        for components and directives.
-
-        For [inputs and outputs](../guide/template-syntax.html#inputs-outputs), 
-        we use `@Input` and `@Output` property decorators.
-        They may optionally specify input and output binding names if we want them to be
-        different from the class property names.
-
-      +makeExample('cb-ts-to-js/ts/app/hero-io.component.ts')(format="." )
-
-      .alert.is-helpful
-        :marked
-          In TypeScript we can also use the `inputs` and `outputs` array metadata 
-          instead of the `@Input` and `@Output` property decorators.
-    td
-      :marked
-        ### Inputs and Outputs in Component Metadata
-
-        There is no equivalent of a property decorator in ES5 JavaScript. Instead, 
-        we add comparable information to the `Component` (or `Directive`) metadata.
-        
-        In this example, we add `inputs` and `outputs` array attributes
-        containing the input and output property names. 
-        If we need a binding name that is different from the
-        property itself, we use the `propertyName: bindingName` syntax.
-
-      +makeExample('cb-ts-to-js/js/app/hero-io.component.js')(format="." )
-
-
-.l-main-section
-:marked
-  ## Dependency Injection
-
-- var top="vertical-align:top"
-table(width="100%")
-  col(width="50%")
-  col(width="50%") 
-  tr
-    th TypeScript
-    th ES5 JavaScript
-  tr(style=top)
-    td
-      :marked
-        ### Injection by Type
-
-        Angular can often use TypeScript type information to
-        determine what needs to be injected.
-
-      +makeExample('cb-ts-to-js/ts/app/hero-di.component.ts')(format="." )
-
-    td
-      :marked
-        ### Injection with Parameter Tokens
-
-        Since no type information is available in ES5 JavaScript,
-        we must identify "injectables" in some other way.
-
-        We attach a `parameters` array to the constructor function. 
-        Each array item is the dependency injection token that identifies the thing to be injected. 
-        Often the token is the constructor function for the class-like dependency.
-
-      +makeExample('cb-ts-to-js/js/app/hero-di.component.js')(format="." )
-
-      :marked
-        When using the class convenience API, we can also supply the parameter
-        tokens by wrapping the constructor in an array.
-
-      +makeExample('cb-ts-to-js/js/app/hero-di-inline.component.js')(format="." )
-
-  tr(style=top)
-    td
-      :marked
-        ### Injection with the @Inject decorator
-
-        When the thing being injected doesn't correspond directly to a type,
-        we use the `@Inject()` decorator to supply the injection token.
-        
-        In this example, we're injecting a string identified by the "heroName" token.
-
-      +makeExample('cb-ts-to-js/ts/app/hero-di-inject.component.ts')(format="." )
-
-    td
-      :marked
-        ### Injection with plain string tokens
-
-        In JavaScript we add the token string to the injection parameters array.
-
-      +makeExample('cb-ts-to-js/js/app/hero-di-inject.component.js','parameters')(format="." )
-      
-      :marked
-        Alternatively, we can create a token with the `Inject` method and
-        add that to the constructor array in the annotations like this:
-        
-      +makeExample('cb-ts-to-js/js/app/hero-di-inject.component.js','ctor')(format="." )        
-
-  tr(style=top)
-    td
-      :marked
-        ### Additional Injection Decorators
-
-        We can attach additional decorators to constructor parameters
-        to qualify the injection behavior. We can mark
-        optional dependencies with the [`@Optional`](../api/core/index/Optional-decorator.html),
-        inject host element attributes with [`@Attribute`](../api/core/index/Attribute-interface.html),
-        inject content child queries with [`@ContentChild`](../api/core/index/ContentChild-decorator.html)
-        and inject view child queries with [`@ViewChild`](../api/core/index/ViewChild-decorator.html)).
-
-      +makeExample('cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts')(format="." )
-
-    td
-      :marked
-        ### Additional Injection Metadata with Nested Arrays 
-
-        To achieve the same effect in JavaScript, use the constructor array notation
-        in which the injection information precedes the constructor function itself.
-        
-        Use the injection support functions `Attribute`, `Host`, `Optional`, `Self`, `SkipSelf` to qualify dependency injection behavior.
-        
-        Use a nested array to combine injection functions.
-
-      +makeExample('cb-ts-to-js/js/app/hero-di-inject-additional.component.js')(format="." )
-
-      :marked
-        We can apply other additional parameter decorators such as
-        [`@Host`](../api/core/index/Host-decorator.html) and
-        [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) in the same way -
-        by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
-        parameters array.
-
-
-a(id="other-property-metadata")
-.l-main-section
-:marked
-  ## Host and Query Metadata
-
-- var top="vertical-align:top"
-table(width="100%")
-  col(width="50%")
-  col(width="50%") 
-  tr
-    th TypeScript
-    th ES5 JavaScript  
-  tr(style=top)
-  
-    td
-      :marked
-        ### Host Decorators
-
-        We can use host property decorators to bind a host element to a component or directive.
-        The [`@HostBinding`](../api/core/index/HostBinding-interface.html) decorator
-        binds host element properties to component data properties. 
-        The [`@HostListener`](../api/core/index/HostListener-interface.html) decorator bimds
-        host element events to component event handlers.
-        
-      +makeExample('cb-ts-to-js/ts/app/heroes-bindings.component.ts')(format="." )
-      
-      .alert.is-helpful
-        :marked
-          In TypeScript we can also use `host` metadata 
-          instead of the `@HostBinding` and `@HostListener` property decorators.
-    td
-      :marked
-        ### Host Metadata
-        
-        We add a `host` attribute to the component metadata to achieve the
-        same effect as `@HostBinding` and `@HostListener`. 
-        
-        The  `host` value is an object whose properties are host property and listener bindings:
-        
-        * Each key follows regular Angular binding syntax: `[property]` for host bindings
-          or `(event)` for host listeners.
-        * Each value identifies the corresponding component property or method.
-        
-      +makeExample('cb-ts-to-js/js/app/heroes-bindings.component.js')(format="." )
-
-  tr(style=top)
-    td
-      :marked
-        ### Query Decorators
-        
-        There are several property decorators for querying the descendants of
-        a component or directive.
-        
-        The [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
-        [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html) property decorators
-        allow a component to query instances of other components that are used in
-        its view.
-        
-      +makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'view')(format="." )
-
-      :marked
-        The [`@ContentChild`](../api/core/index/ContentChild-decorator.html) and
-        [`@ContentChildren`](../api/core/index/ContentChildren-decorator.html) property decorators
-        allow a component to query instances of other components that have been projected
-        into its view from elsewhere.
-        
-      +makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'content')(format="." )
-      
-      .alert.is-helpful
-        :marked
-          In TypeScript we can also use the `queries` metadata 
-          instead of the `@ViewChild` and `@ContentChild` property decorators.      
-    td
-      :marked
-        ### Query Metadata
-        
-        We access a component's view children by adding a `queries` attribute to
-        the component metadata. It should be an object where:
-        
-        * Each key is the name of a component property that will hold the view children
-        * Each value is an instance of either `ViewChild` or `ViewChildren`.
-        
-      +makeExample('cb-ts-to-js/js/app/heroes-queries.component.js', 'view')(format="." )
-
-      :marked
-        We add *content* child queries to the same `queries` attribute
-        in the same manner, using instances of `ContentChild` or `ContentChildren`:
-        
-      +makeExample('cb-ts-to-js/js/app/heroes-queries.component.js', 'content')(format="." )
+include ../../../ts/latest/cookbook/ts-to-js
diff --git a/public/docs/ts/_cache/guide/dependency-injection.jade b/public/docs/ts/_cache/guide/dependency-injection.jade
index 2aab8eb547..cdff9876e9 100644
--- a/public/docs/ts/_cache/guide/dependency-injection.jade
+++ b/public/docs/ts/_cache/guide/dependency-injection.jade
@@ -388,10 +388,10 @@ block ctor-syntax
   We call that property within our `getHeroes` method when anyone asks for heroes.
 
 //- FIXME refer to Dart API when that page becomes available.
-- var injMetaUrl = 'https://angular.io/docs/ts/latest/api/core/index/InjectableMetadata-class.html';
+- var injUrl = '../api/core/index/Injectable-decorator.html';
 h3#injectable Why @Injectable()?
 :marked
-  **<a href="#{injMetaUrl}">@Injectable()</a>** marks a class as available to an
+  **<a href="#{injUrl}">@Injectable()</a>** marks a class as available to an
   injector for instantiation. Generally speaking, an injector will report an
   error when trying to instantiate a class that is not marked as
   `@Injectable()`.
@@ -423,8 +423,8 @@ block injectable-not-always-needed-in-ts
   We *can* add it if we really want to. It isn't necessary because the
   `HeroesComponent` is already marked with `@Component`, and this
   !{_decorator} class (like `@Directive` and `@Pipe`, which we'll learn about later)
-  is a subtype of <a href="#{injMetaUrl}">InjectableMetadata</a>.  It is in
-  fact `InjectableMetadata` #{_decorator}s that
+  is a subtype of <a href="#{injUrl}">Injectable</a>.  It is in
+  fact `Injectable` #{_decorator}s that
   identify a class as a target for instantiation by an injector.
 
 +ifDocsFor('ts')
@@ -442,7 +442,7 @@ block injectable-not-always-needed-in-ts
       for _every class with at least one decorator_.
 
       While any decorator will trigger this effect, mark the service class with the
-      <a href="#{injMetaUrl}">InjectableMetadata</a> #{_decorator}
+      <a href="#{injUrl}">Injectable</a> #{_decorator}
       to make the intent clear.
 
 .callout.is-critical
diff --git a/public/docs/ts/_cache/guide/template-syntax.jade b/public/docs/ts/_cache/guide/template-syntax.jade
index 165db573c3..ef9ab05371 100644
--- a/public/docs/ts/_cache/guide/template-syntax.jade
+++ b/public/docs/ts/_cache/guide/template-syntax.jade
@@ -21,6 +21,7 @@ block includes
   * [Property binding](#property-binding)
   * [Attribute, class, and style bindings](#other-bindings)
   * [Event binding](#event-binding)
+  * [Two-way data binding](#two-way)
   * [Two-way data binding with `NgModel`](#ngModel)
   * [Built-in directives](#directives)
     * [NgClass](#ngClass)
@@ -44,7 +45,7 @@ block includes
   HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application has a template that is pure HTML:
 
 code-example(language="html" escape="html").
-  <h1>My First Angular 2 App</h1>
+  <h1>My First Angular App</h1>
 
 :marked
   Almost all HTML syntax is valid template syntax. The `<script>` element is a notable exception; it is forbidden, eliminating the risk of script injection attacks. (In practice, `<script>` is simply ignored.)
@@ -387,7 +388,7 @@ table
 .callout.is-helpful
   header A world without attributes
   :marked
-    In the world of Angular 2, the only role of attributes is to initialize element and directive state.
+    In the world of Angular, the only role of attributes is to initialize element and directive state.
     When we data bind, we're dealing exclusively with element and directive properties and events.
     Attributes effectively disappear.
 :marked
@@ -489,8 +490,8 @@ table
     If we must read a target element property or call one of its methods,
     we'll need a different technique.
     See the API reference for
-    [viewChild](../api/core/index/ViewChild-var.html) and
-    [contentChild](../api/core/index/ContentChild-var.html).
+    [ViewChild](../api/core/index/ViewChild-decorator.html) and
+    [ContentChild](../api/core/index/ContentChild-decorator.html).
 
 :marked
   ### Binding target
@@ -580,7 +581,7 @@ a(id="one-time-initialization")
 
 
 :marked
-  #### Content Security
+  #### Content security
   Imagine the following *malicious content*.
 +makeExample('template-syntax/ts/app/app.component.ts', 'evil-title')(format=".")    
 :marked
@@ -598,10 +599,10 @@ figure.image-display
 .l-main-section
 :marked
   <a id="other-bindings"></a>
-  ## Attribute, Class, and Style Bindings
+  ## Attribute, class, and style bindings
   The template syntax provides specialized one-way bindings for scenarios less well suited to property binding.
 
-  ### Attribute Binding
+  ### Attribute binding
   We can set the value of an attribute directly with an **attribute binding**.
 .l-sub-section
   :marked
@@ -651,7 +652,7 @@ code-example(format="nocode").
   is to set ARIA attributes, as in this example:
 +makeExample('template-syntax/ts/app/app.component.html', 'attrib-binding-aria')(format=".")
 :marked
-  ### Class Binding
+  ### Class binding
 
   We can add and remove CSS class names from an element’s `class` attribute with
   a **class binding**.
@@ -667,9 +668,6 @@ code-example(format="nocode").
   We can replace that with a binding to a string of the desired class names; this is an all-or-nothing, replacement binding.
 +makeExample('template-syntax/ts/app/app.component.html', 'class-binding-2')(format=".")
 
-block dart-class-binding-bug
-  //- N/A
-
 :marked
   Finally, we can bind to a specific class name.
   Angular adds the class when the template expression evaluates to #{_truthy}.
@@ -682,7 +680,7 @@ block dart-class-binding-bug
     we generally prefer the [NgClass directive](#ngClass) for managing multiple class names at the same time.
 
 :marked
-  ### Style Binding
+  ### Style binding
 
   We can set inline styles with a **style binding**.
 
@@ -711,12 +709,12 @@ block style-property-name-dart-diff
 
 .l-main-section
 :marked
-  ## Event Binding
-  The bindings we’ve met so far flow data in one direction: *from the component to an element*.
+  ## Event binding
+  The bindings we’ve met so far flow data in one direction: **from a component to an element**.
 
   Users don’t just stare at the screen. They enter text into input boxes. They pick items from lists.
   They click buttons. Such user actions may result in a flow of data in the opposite direction:
-  *from an element to the component*.
+  **from an element to a component**.
 
   The only way to know about a user action is to listen for certain events such as
   keystrokes, mouse movements, clicks, and touches.
@@ -728,12 +726,12 @@ block style-property-name-dart-diff
   the component's `onSave()` method whenever a click occurs:
 +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
 :marked
-  ### Target Event
-  A **name between enclosing parentheses** &mdash; for example, `(click)` &mdash;
+  ### Target event
+  A **name between parentheses** &mdash; for example, `(click)` &mdash;
   identifies the target event. In the following example, the target is the button’s click event.
 +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
 :marked
-  Some people prefer the `on-` prefix alternative, known as the *canonical form*:
+  Some people prefer the `on-` prefix alternative, known as the **canonical form**:
 +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-2')(format=".")
 :marked
   Element events may be the more common targets, but Angular looks first to see if the name matches an event property
@@ -742,8 +740,8 @@ block style-property-name-dart-diff
 
 .l-sub-section
   :marked
-    The `myClick` directive is further described below in the section
-    on [Aliasing input/output properties](#aliasing-io).
+    The `myClick` directive is further described in the section
+    on [aliasing input/output properties](#aliasing-io).
 
 :marked
   If the name fails to match an element event or an output property of a known directive,
@@ -753,36 +751,35 @@ block style-property-name-dart-diff
   In an event binding, Angular sets up an event handler for the target event.
 
   When the event is raised, the handler executes the template statement.
-  The template statement typically involves a receiver that wants to do something
-  in response to the event, such as take a value from the HTML control and store it
-  in a model.
+  The template statement typically involves a receiver, which performs an action
+  in response to the event, such as storing a value from the HTML control
+  into a model.
 
   The binding conveys information about the event, including data values, through
   an **event object named `$event`**.
 
-  The shape of the event object is determined by the target event itself.
-  If the target event is a native DOM element event, the `$event` is a
+  The shape of the event object is determined by the target event.
+  If the target event is a native DOM element event, then `$event` is a
   [DOM event object]( https://developer.mozilla.org/en-US/docs/Web/Events),
   with properties such as `target` and `target.value`.
 
   Consider this example:
 +makeExample('template-syntax/ts/app/app.component.html', 'without-NgModel')(format=".")
 :marked
-  We’re binding the input box `value` to a `firstName` property, and we’re listening for changes by binding to the input box’s `input` event.
+  This code sets the input box `value` property by binding to the `firstName` property. To listen for changes to the value, the code binds to the input box's `input` event.
   When the user makes changes, the `input` event is raised, and the binding executes the statement within a context that includes the DOM event object, `$event`.
 
-  To update the `firstName` property, we must get the changed text by following
-  the path `$event.target.value`.
+  To update the `firstName` property, the changed text is retrieved by following the path `$event.target.value`.
 
-  If the event belongs to a directive (remember: components are directives), `$event` has whatever shape the directive chose to produce.
+  If the event belongs to a directive (recall that components are directives), `$event` has whatever shape the directive decides to produce.
 
   <a id="eventemitter"></a>
   <a id="custom-event"></a>
-  ### Custom Events with EventEmitter
+  ### Custom events with *EventEmitter*
 
   Directives typically raise custom events with an Angular [EventEmitter](../api/core/index/EventEmitter-class.html).
-  A directive creates an `EventEmitter` and exposes it as a property.
-  The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload that can be anything.
+  The directive creates an `EventEmitter` and exposes it as a property.
+  The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything.
   Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
 
   Consider a `HeroDetailComponent` that presents hero information and responds to user actions.
@@ -797,8 +794,8 @@ block style-property-name-dart-diff
 
 :marked
   The component defines a `deleteRequest` property that returns an `EventEmitter`.
-  When the user clicks *delete*, the component invokes the `delete()` method
-  which tells the `EventEmitter` to emit a `Hero` object.
+  When the user clicks *delete*, the component invokes the `delete()` method, 
+  telling the `EventEmitter` to emit a `Hero` object.
 
   Now imagine a hosting parent component that binds to the `HeroDetailComponent`'s `deleteRequest` event.
 
@@ -810,12 +807,11 @@ block style-property-name-dart-diff
 
   ### Template statements have side effects
   The `deleteHero` method has a side effect: it deletes a hero.
-  Template statement side effects are not just OK, they are expected.
+  Template statement side effects are not just OK, but expected.
 
   Deleting the hero updates the model, perhaps triggering other changes
   including queries and saves to a remote server.
   These changes percolate through the system and are ultimately displayed in this and other views.
-  It's all good.
 
 //
   :marked
@@ -843,19 +839,72 @@ block style-property-name-dart-diff
     and the outer `<div>`, causing a double save.
   +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-propagation')(format=".")
 
-
+#two-way
+.l-main-section
+:marked
+  ## Two-way binding
+  We often want to both display a data property and update that property when the user makes changes.
+
+  On the element side that takes a combination of setting a specific element property
+  and listening for an element change event.
+
+  Angular offers a special _two-way data binding_ syntax for this purpose, **`[(x)]`**.
+  The `[(x)]` syntax combines the brackets 
+  of _property binding_, `[x]`, with the parentheses of _event binding_, `(x)`.
+
+.callout.is-important
+  header [( )] = banana in a box
+  :marked
+    Visualize a *banana in a box* to remember that the parentheses go _inside_ the brackets.
+
+:marked
+  The `[(x)]` syntax is easy to demonstrate when the element has a settable property called `x`
+  and a corresponding event named `xChange`. 
+  Here's a `SizerComponent` that fits the pattern.
+  It has a `size` value property and a companion `sizeChange` event:
+
++makeExample('app/sizer.component.ts')
+
+:marked
+  The initial `size` is an input value from a property binding.
+  Clicking the buttons increases or decreases the `size`, within min/max values constraints,
+  and then raises (_emits_) the `sizeChange` event with the adjusted size.
+
+  Here's an example in which the `AppComponent.fontSizePx` is two-way bound to the `SizerComponent`:
+
++makeExcerpt('app/app.component.html', 'two-way-1', '')
+
+:marked
+  The `AppComponent.fontSizePx` establishes the initial `SizerComponent.size` value.
+  Clicking the buttons updates the `AppComponent.fontSizePx` via the two-way binding.
+  The revised `AppComponent.fontSizePx` value flows through to the _style_ binding, making the displayed text bigger or smaller.
+  Try it in the <live-example></live-example>.
+
+  The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding.
+  Angular _desugars_ the `SizerComponent` binding into this:
+
++makeExcerpt('app/app.component.html', 'two-way-2', '')
+
+:marked
+  The `$event` variable contains the payload of the `SizerComponent.sizeChange` event.
+  Angular assigns the `$event` value to the `AppComponent.fontSizePx` when the user clicks the buttons.
+
+  Clearly the two-way binding syntax is a great convenience compared to separate property and event bindings.
+
+  We'd like to use two-way binding with HTML form elements like `<input>` and `<select>`.
+  Sadly, no native HTML element follows the `x` value and `xChange` event pattern.
+
+  Fortunately, the Angular [_NgModel_](#ngModel) directive is a bridge that enables two-way binding to form elements.
+
+a#ngModel
 .l-main-section
 :marked
-  <a id="ngModel"></a>
   ## Two-way binding with NgModel
   When developing data entry forms, we often want to both display a data property and update that property when the user makes changes.
 
-  The `[(ngModel)]` two-way data binding syntax makes that easy. Here's an example:
+  Two-way data binding with the `NgModel` directive makes that easy. Here's an example:
 +makeExample('template-syntax/ts/app/app.component.html', 'NgModel-1')(format=".")
-.callout.is-important
-  header [()] = banana in a box
-  :marked
-    To remember that the parentheses go inside the brackets, visualize a *banana in a box*.
+
 
 +ifDocsFor('ts|js')
   .callout.is-important
@@ -865,18 +914,18 @@ block style-property-name-dart-diff
       we must import the `FormsModule` and add it to the Angular module's `imports` list.
       Learn more about the `FormsModule` and `ngModel` in the
       [Forms](../guide/forms.html#ngModel) chapter.
-
+  :marked
+    Here's how to import the `FormsModule` to make `[(ngModel)]` available.
   +makeExample('template-syntax/ts/app/app.module.1.ts', '', 'app.module.ts (FormsModule import)')
 
 :marked
-  There’s a story behind this construction, a story that builds on the property and event binding techniques we learned previously.
-
   ### Inside `[(ngModel)]`
-  We could have achieved the same result with separate bindings to
+  Looking back at the `firstName` binding, it's important to note that
+  we could have achieved the same result with separate bindings to
   the `<input>` element's  `value` property and `input` event.
 +makeExample('template-syntax/ts/app/app.component.html', 'without-NgModel')(format=".")
 :marked
-  That’s cumbersome. Who can remember which element property to set and what event reports user changes?
+  That’s cumbersome. Who can remember which element property to set and which element event emits user changes?
   How do we extract the currently displayed text from the input box so we can update the data property?
   Who wants to look that up each time?
 
@@ -884,35 +933,29 @@ block style-property-name-dart-diff
 +makeExample('template-syntax/ts/app/app.component.html', 'NgModel-3')(format=".")
 .l-sub-section
   :marked
-    The `ngModel` input property sets the element's value property and the `ngModelChange` output property
+    The `ngModel` data property sets the element's value property and the `ngModelChange` event property
     listens for changes to the element's value.
-    The details are specific to each kind of element and therefore the `NgModel` directive only works for elements,
-    such as the input text box, that are supported by a [ControlValueAccessor](../api/common/index/ControlValueAccessor-interface.html).
-    We can't apply `[(ngModel)]` to our custom components until we write a suitable *value accessor*,
+    
+    The details are specific to each kind of element and therefore the `NgModel` directive only works for specific form elements,
+    such as the input text box, that are supported by a [ControlValueAccessor](../api/forms/index/ControlValueAccessor-interface.html).
+
+    We can't apply `[(ngModel)]` to a custom component until we write a suitable *value accessor*,
     a technique that is beyond the scope of this chapter.
+    That's something we might want to do for an Angular component or a WebComponent whose API we can't control.
+    
+    It's completely unnecessary for an Angular component that we _do_ control ... because we can name the value and event properties
+    to suit Angular's basic [two-way binding syntax](#two-way) and skip `NgModel` altogether.
 
 :marked
-  Separate `ngModel` bindings is an improvement. We can do better.
+  Separate `ngModel` bindings is an improvement over binding to the element's native properties. We can do better.
 
   We shouldn't have to mention the data property twice. Angular should be able to capture the component’s data property and set it
-  with a single declaration &mdash; which it can with the `[( )]` syntax:
+  with a single declaration &mdash; which it can with the `[(ngModel)]` syntax:
 +makeExample('template-syntax/ts/app/app.component.html', 'NgModel-1')(format=".")
-
-.l-sub-section
-  :marked
-    `[(ngModel)]` is a specific example of a more general pattern in which Angular "de-sugars" the `[(x)]` syntax
-    into an `x` input property for property binding and an `xChange` output property for event binding.
-    Angular constructs the event property binding's template statement by appending `=$event`
-    to the literal string of the template expression.
-
-    > <span style="font-family:courier">[(_x_)]="_e_" &lt;==> [_x_]="_e_" (<i>x</i>Change)="_e_=$event"</span>
-
-    We can write a two-way binding directive of our own to exploit this behavior.
-
 :marked
   Is `[(ngModel)]` all we need? Is there ever a reason to fall back to its expanded form?
 
-  The `[( )]` syntax can only _set_ a data-bound property.
+  The `[(ngModel)]` syntax can only _set_ a data-bound property.
   If we need to do something more or something different, we need to write the expanded form ourselves.
 
   Let's try something silly like forcing the input value to uppercase:
@@ -931,8 +974,8 @@ figure.image-display
   The community contributed many more, and countless private directives
   have been created for internal applications.
 
-  We don’t need many of those directives in Angular 2.
-  Quite often we can achieve the same results with the more capable and expressive Angular 2 binding system.
+  We don’t need many of those directives in Angular.
+  Quite often we can achieve the same results with the more capable and expressive Angular binding system.
   Why create a directive to handle a click when we can write a simple binding such as this?
 +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
 :marked
@@ -1203,7 +1246,7 @@ block remember-the-brackets
 
 :marked
   ### Expanding `*ngSwitch`
-  A similar transformation applies to `*ngSwitch`. We can de-sugar the syntax ourselves.
+  A similar transformation applies to `*ngSwitch`. We can unfold the syntax ourselves.
   Here's an example, first with `*ngSwitchCase` and `*ngSwitchDefault` and then again with `<template>` tags:
 +makeExample('template-syntax/ts/app/app.component.html', 'NgSwitch-expanded')(format=".")
 :marked
@@ -1241,14 +1284,18 @@ figure.image-display
 
   A **template reference variable** is a reference to a DOM element or directive within a template.
 
-  It can be used with native DOM elements but also with Angular 2 components &mdash; in fact, it will work with any custom web component.
+  It can be used with native DOM elements but also with Angular components &mdash; in fact, it will work with any custom web component.
 
 :marked
   ### Referencing a template reference variable
 
-  We can reference a template reference variable on the same element, on a sibling element, or on
-  any child elements.
+  We can refer to a template reference variable _anywhere_ in the current template.
+.l-sub-section
+  :marked
+    Do not define the same variable name more than once in the same template.
+    The runtime value will be unpredictable.
 
+:marked
   Here are two other examples of creating and consuming a Template reference variable:
 +makeExample('template-syntax/ts/app/app.component.html', 'ref-phone')(format=".")
 :marked
@@ -1376,7 +1423,7 @@ h3#aliasing-io Aliasing input/output properties
   Directive consumers expect to bind to the name of the directive.
   For example, when we apply a directive with a `myClick` selector to a `<div>` tag,
   we expect to bind to an event property that is also called `myClick`.
-+makeExample('template-syntax/ts/app/app.component.html', 'my-click')(format=".")
++makeExample('template-syntax/ts/app/app.component.html', 'myClick')(format=".")
 :marked
   However, the directive name is often a poor choice for the name of a property within the directive class.
   The directive name rarely describes what the property does.
@@ -1389,14 +1436,14 @@ h3#aliasing-io Aliasing input/output properties
 
   We can specify the alias for the property name by passing it into the input/output decorator like this:
 
-+makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-1')(format=".")
++makeExample('template-syntax/ts/app/click.directive.ts', 'output-myClick')(format=".")
 
 .l-sub-section
   :marked
     We can also alias property names in the `inputs` and `outputs` #{_array}s.
     We write a colon-delimited (`:`) string with
     the directive property name on the *left* and the public alias on the *right*:
-  +makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-2')(format=".")
+  +makeExample('template-syntax/ts/app/click.directive.ts', 'output-myClick2')(format=".")
 
 <a id="expression-operators"></a>
 .l-main-section
diff --git a/public/docs/ts/_cache/tutorial/toh-pt5.jade b/public/docs/ts/_cache/tutorial/toh-pt5.jade
index 67f14e41a1..e237165347 100644
--- a/public/docs/ts/_cache/tutorial/toh-pt5.jade
+++ b/public/docs/ts/_cache/tutorial/toh-pt5.jade
@@ -2,15 +2,13 @@
 
 block includes
   include ../_util-fns
-  - var _appRoutingTsVsAppComp = 'app-routing.module.ts'
+  - var _appRoutingTsVsAppComp = 'app.module.ts'
   - var _declsVsDirectives = 'declarations'
   - var _RoutesVsAtRouteConfig = 'Routes'
   - var _RouterModuleVsRouterDirectives = 'RouterModule'
   - var _redirectTo = 'redirectTo'
 
 :marked
-  # Routing Around the App
-
   We received new requirements for our Tour of Heroes application:
 
   * Add a *Dashboard* view.
@@ -24,7 +22,7 @@ figure.image-display
   img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations")
 
 :marked
-  We'll add Angular’s *Component Router* to our app to satisfy these requirements.
+  We'll add Angular’s *Router* to our app to satisfy these requirements.
 
 .l-sub-section
   :marked
@@ -52,7 +50,7 @@ figure.image-display
 
 block intro-file-tree
   .filetree
-    .file angular2-tour-of-heroes
+    .file angular-tour-of-heroes
     .children
       .file app
       .children
@@ -164,7 +162,7 @@ block app-comp-v1
   Instead of displaying heroes automatically, we'd like to show them *after* the user clicks a button.
   In other words, we'd like to navigate to the list of heroes.
 
-  We'll need the Angular *Component Router*.
+  We'll need the Angular *Router*.
 
 block angular-router
   :marked
@@ -192,7 +190,7 @@ block router-config-intro
     ### Configure routes
 
     Our application doesn't have any routes yet.
-    We'll start by creating a configuration file for the application routes.
+    We'll start by creating a configuration for the application routes.
 
 :marked
   *Routes* tell the router which views to display when a user clicks a link or
@@ -200,7 +198,7 @@ block router-config-intro
 
   Let's define our first route as a route to the heroes component:
 
-- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app-routing.module.ts'
+- var _file = _docsFor == 'dart' ? 'app.component.ts' : 'app.module.2.ts'
 +makeExcerpt('app/' + _file + ' (heroes route)', 'heroes')
 
 - var _are = _docsFor == 'dart' ? 'takes' : 'are'
@@ -222,24 +220,18 @@ block router-config-intro
 
 +ifDocsFor('ts|js')
   :marked
-    We'll export a `routing` constant initialized using the `RouterModule.forRoot` method applied to our !{_array} of routes.
-    This method returns a **configured router module** that we'll add to our root NgModule, `AppModule`.
+    ### Make the router available
 
-  +makeExcerpt('app/app-routing.module.1.ts (excerpt)', 'routing-export')
+    We've setup the initial route configuration. Now we'll add it to our `AppModule`.
+    We'll add our configured `RouterModule` to the `AppModule` imports !{_array}.
+
+  +makeExcerpt('app/app.module.2.ts (app routing)', '')
 
   .l-sub-section
     :marked
-      We call the `forRoot` method because we're providing a configured router at the _root_ of the application.
-      The `forRoot` method gives us the Router service providers and directives needed for routing.
-
-  :marked
-    ### Make the router available
-
-    We've setup initial routes in the `app-routing.module.ts` file. Now we'll add it to our root NgModule.
-
-    Import the `routing` constant from `app-routing.module.ts` and add it the `imports` !{_array} of `AppModule`.
-
-  +makeExcerpt('app/app.module.ts', 'routing')
+      We use the `forRoot` method because we're providing a configured router at the _root_ of the application.
+      The `forRoot` method gives us the Router service providers and directives needed for routing, and
+      performs the initial navigation based on the current browser URL.
 
 - var _heroesRoute = _docsFor == 'dart' ? "'Heroes'" : 'heroes'
 :marked
@@ -317,12 +309,12 @@ block routerLink
   Import the dashboard component and
   add the following route definition to the `!{_RoutesVsAtRouteConfig}` !{_array} of definitions.
 
-- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app-routing.module.ts'
+- var _file = _docsFor == 'dart' ? 'lib/app_component.dart' : 'app/app.module.3.ts'
 +makeExcerpt(_file + ' (Dashboard route)', 'dashboard')
 
 +ifDocsFor('ts|js')
   :marked
-    Also import and add `DashboardComponent` to our root NgModule's `declarations`.
+    Also import and add `DashboardComponent` to our `AppModule`'s `declarations`.
 
   +makeExcerpt('app/app.module.ts', 'dashboard')
 
@@ -338,7 +330,7 @@ block redirect-vs-use-as-default
     We can use a redirect route to make this happen. Add the following
     to our array of route definitions:
 
-  +makeExcerpt('app/app-routing.module.ts','redirect')
+  +makeExcerpt('app/app.module.3.ts','redirect')
 
   .l-sub-section
     :marked
@@ -354,7 +346,7 @@ block redirect-vs-use-as-default
 
 .l-sub-section
   :marked
-    We nestled the two links within `<nav>` tags.
+    We nested the two links within `<nav>` tags.
     They don't do anything yet but they'll be convenient when we style the links a little later in the chapter.
 
 :marked
@@ -367,30 +359,24 @@ 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('app/dashboard.component.ts', 'templateUrl')
++makeExcerpt('app/dashboard.component.ts', 'metadata')
 
-.l-sub-section
-  block templateUrl-path-resolution
-    :marked
-      We specify the path _all the way back to the application root_ &mdash;
-      <span if-docs="ts">`app/` in this case &mdash;</span>
-      because Angular doesn't support relative paths _by default_.
-      We _can_ switch to [component-relative paths](../cookbook/component-relative-paths.html) if we prefer.
+block templateUrl-path-resolution
+  //- N/A for TS
 
 :marked
   Create that file with this content:
 
-+makeExcerpt('app/dashboard.component.html')
++makeExample('app/dashboard.component.1.html', '', 'app/dashboard.component.html')
 
 :marked
   We use `*ngFor` once again to iterate over a list of heroes and display their names.
   We added extra `<div>` elements to help with styling later in this chapter.
 
-  There's a `(click)` binding to a `gotoDetail` method we haven't written yet and
-  we're displaying a list of heroes that we don't have.
-  We have work to do, starting with those heroes.
-
   ### Share the *HeroService*
 
   We'd like to re-use the `HeroService` to populate the component's `heroes` !{_array}.
@@ -405,12 +391,12 @@ block redirect-vs-use-as-default
 
   Open <span ngio-ex>dashboard.component.ts</span> and add the requisite `import` statements.
 
-+makeExcerpt('app/dashboard.component.2.ts','imports')
++makeExcerpt('app/dashboard.component.ts','imports')
 
 :marked
   Now implement the `DashboardComponent` class like this:
 
-+makeExcerpt('app/dashboard.component.2.ts (class)', 'component')
++makeExcerpt('app/dashboard.component.ts (class)', 'class')
 
 :marked
   We've seen this kind of logic before in the `HeroesComponent`:
@@ -419,8 +405,7 @@ block redirect-vs-use-as-default
   * Inject the `HeroService` in the constructor and hold it in a private `!{_priv}heroService` field.
   * Call the service to get heroes inside the Angular `ngOnInit` lifecycle hook.
 
-  The noteworthy differences: we cherry-pick four heroes (2nd, 3rd, 4th, and 5th)
-  and stub the `gotoDetail` method until we're ready to implement it.
+  In this dashboard we cherry-pick four heroes (2nd, 3rd, 4th, and 5th)<span if-docs="ts"> with the `Array.slice` method</span>.
 
   Refresh the browser and see four heroes in the new dashboard.
 
@@ -470,7 +455,7 @@ code-example(format='').
 
   Here's the *route definition* we'll use.
 
-- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app-routing.module.ts'
+- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.module.3.ts'
 +makeExcerpt(_file + ' (hero detail)','hero-detail')
 
 :marked
@@ -521,7 +506,7 @@ block route-params
 
 - var _ActivatedRoute = _docsFor == 'dart' ? 'RouteParams' : 'ActivatedRoute'
 :marked
-  Let's have the `!{_ActivatedRoute}` service and the `HeroService` injected
+  Let's have the `!{_ActivatedRoute}` service, the `HeroService` and the `Location` service injected
   into the constructor, saving their values in private fields:
 
 +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
@@ -534,7 +519,7 @@ block route-params
 block ngOnInit
   :marked
     Inside the `ngOnInit` lifecycle hook, we use the `params` observable to
-    extract the `id` parameter value from the `ActivateRoute` service
+    extract the `id` parameter value from the `ActivatedRoute` service
     and use the `HeroService` to fetch the hero with that `id`.
 
 +makeExcerpt('app/hero-detail.component.ts', 'ngOnInit')
@@ -567,7 +552,8 @@ block extract-id
   How do we navigate somewhere else when we're done?
 
   The user could click one of the two links in the `AppComponent`. Or click the browser's back button.
-  We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack.
+  We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack
+  using the `Location` service we injected previously.
 
 +makeExcerpt('app/hero-detail.component.ts', 'goBack')
 
@@ -586,16 +572,16 @@ block extract-id
 +makeExcerpt('app/hero-detail.component.html', 'back-button', '')
 
 :marked
-  Modifing the template to add this button spurs us to take one more
+  Modifying the template to add this button spurs us to take one more
   incremental improvement and migrate the template to its own file,
   called <span ngio-ex>hero-detail.component.html</span>:
 
 +makeExample('app/hero-detail.component.html')
 
 :marked
-  We update the component metadata with a `templateUrl` pointing to the template file that we just created.
+  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.
 
-+makeExcerpt('app/hero-detail.component.ts', 'templateUrl')
++makeExcerpt('app/hero-detail.component.ts', 'metadata')
 
 :marked
   Refresh the browser and see the results.
@@ -606,71 +592,118 @@ block extract-id
 
   When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero.
 
-  In the dashboard template we bound each hero's click event to the `gotoDetail` method, passing along the selected `hero` entity.
+  Although the dashboard heroes are presented as button-like blocks, they should behave like anchor tags.
+  When hovering over a hero block, the target URL should display in the browser status bar 
+  and the user should be able to copy the link or open the hero detail view in a new tab.
 
-+makeExcerpt('app/dashboard.component.html', 'click')
+  To achieve this effect, reopen the `dashboard.component.html` and replace the repeated `<div *ngFor...>` tags
+  with `<a>` tags. The opening `<a>` tag looks like this:
 
-:marked
-  We stubbed the `gotoDetail` method when we rewrote the `DashboardComponent`.
-  Now we give it a real implementation.
++makeExample('app/dashboard.component.html', 'click', 'app/dashboard.component.html (repeated <a> tag)')
 
-+makeExcerpt('app/dashboard.component.ts','gotoDetail')
++ifDocsFor('dart')
+  .alert.is-important
+    :marked
+      Router links in the dashboard are currently not operational, as reported in issue
+      [dart-lang/angular2/issues/186](https://github.com/dart-lang/angular2/issues/186).
 
 - var _pathVsName = _docsFor == 'dart' ? 'name' : 'path'
 :marked
-  The `gotoDetail` method navigates in two steps:
+  Notice the `[routerLink]` binding.
 
-  1. Set a route *link parameters !{_array}*
-  1. Pass the !{_array} to the router's navigate method
+  Top level navigation in the [`AppComponent`
+  template](#router-links) has router links set to fixed !{_pathVsName}s of the
+  destination routes, "/dashboard" and "/heroes".
 
-  For navigation, we wrote router links <span if-docs="dart">as *link
-  parameters !{_array}s*</span> in the [`AppComponent`
-  template](#router-links).  Those link<span if-docs="dart"> parameters
-  !{_array}</span>s had only one element, the !{_pathVsName} of the
-  destination route.
-
-  This link parameters !{_array} has two elements, the ***!{_pathVsName}*** of
-  the destination route and a ***route parameter*** <span if-docs="dart">with
-  an `id` field</span> set to the value of the selected hero's `id`.
+  This time, we're binding to an expression containing a **link parameters !{_array}**.
+  The !{_array} has two elements, the ***!{_pathVsName}*** of
+  the destination route and a ***route parameter*** set to the value of the current hero's `id`.
 
   The two !{_array} items align with the ***!{_pathVsName}*** and ***:id***
   token in the parameterized hero detail route definition we added to
   `!{_appRoutingTsVsAppComp}` earlier in the chapter:
 
-- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app-routing.module.ts'
+- var _file = _docsFor == 'dart' ? 'app/app.component.ts' : 'app/app.module.3.ts'
 +makeExcerpt(_file + ' (hero detail)', 'hero-detail')
 
-:marked
-  The `DashboardComponent` doesn't have the router yet. We obtain it in the usual way:
-  import the `router` reference and inject it in the constructor (along with the `HeroService`):
-
-+makeExcerpt('app/dashboard.component.ts ()','import-router', '')
-
-+makeExcerpt('app/dashboard.component.ts', 'ctor', '')
-
 :marked
   Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
 
++ifDocsFor('ts')
+  .l-main-section
+  :marked
+    ## Refactor routes to a _Routing Module_
+
+    Almost 20 lines of `AppModule` are devoted to configuring four routes. 
+    Most applications have many more routes and they [add guard services](../guide/router.html#guards) 
+    to protect against unwanted or unauthorized navigations. 
+    Routing considerations could quickly dominate this module and obscure its primary purpose which is to 
+    establish key facts about the entire app for the Angular compiler.
+
+    We should refactor the routing configuration into its own class.
+    What kind of class? 
+    The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders` which suggests that a
+    class dedicated to routing should be some kind of module.
+    It should be a [_Routing Module_](../guide/router.html#routing-module).
+
+    By convention the name of a _Routing Module_ contains the word "Routing" and 
+    aligns with the name of the module that declares the components navigated to.
+
+    Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents extracted from the `AppModule` class:
+
+  +makeExample('app/app-routing.module.ts')
+  :marked
+    Noteworthy points, typical of _Routing Modules_:
+    * Pull the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
+
+    * Add `RouterModule.forRoot(routes)` to `imports`.
+
+    * Add `RouterModule` to `exports` so that the components in the companion module have access to Router declarables 
+    such as `RouterLink` and `RouterOutlet`.
+
+    * No `declarations`!  Declarations are the responsibility of the companion module.
+
+    * Add module `providers` for guard services if you have them; there are none in this example.
+
+    ### Update _AppModule_
+
+    Now delete the routing configuration from `AppModule` and import the `AppRoutingModule` 
+    (_both_ with an ES `import` statement _and_ by adding it to the `NgModule.imports` list).
+
+    Here is the revised `AppModule`, compared to its pre-refactor state:
+  +makeTabs(
+    `toh-5/ts/app/app.module.ts, toh-5/ts/app/app.module.3.ts`,
+     null,
+    `app/app.module.ts (after), app/app.module.ts (before)`)
+  :marked
+    It's simpler and focused on indentifying the key pieces of the application.
+
 .l-main-section
 :marked
   ## Select a Hero in the *HeroesComponent*
 
+  Earlier we added the ability to select a hero from the dashboard.
   We'll do something similar in the `HeroesComponent`.
 
-  That component's current template exhibits a "master/detail" style with the list of heroes
+  The `HeroesComponent` template exhibits a "master/detail" style with the list of heroes
   at the top and details of the selected hero below.
 
 +makeExample('toh-4/ts/app/app.component.ts','template', 'app/heroes.component.ts (current template)')(format=".")
 
 :marked
+  Our goal is to move the detail to its own view and navigate to it when the user decides to edit a selected hero.
+
+  Delete the `<h1>` at the top (we forgot about it during the `AppComponent`-to-`HeroesComponent` conversion).
+
   Delete the last line of the template with the `<my-hero-detail>` tags.
 
   We'll no longer show the full `HeroDetailComponent` here.
   We're going to display the hero detail on its own page and route to it as we did in the dashboard.
 
-  But we'll throw in a small twist for variety.
-  When the user selects a hero from the list, we *won't* go to the detail page.
-  We'll show a *mini-detail* on *this* page instead and make the user click a button to navigate to the *full detail *page.
+  We'll throw in a small twist for variety.
+  We are keeping the "master/detail" style but shrinking the detail to a "mini", read-only version.
+  When the user selects a hero from the list, we *don't* go to the detail page.
+  We show a *mini-detail* on *this* page instead and make the user click a button to navigate to the *full detail *page.
 
   ### Add the *mini-detail*
 
@@ -714,13 +747,12 @@ 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
     The `styleUrls` property is !{_an} !{_array} of style file names (with paths).
     We could list multiple style files from different locations if we needed them.
-    <span if-docs="ts">As with `templateUrl`, we must specify the path _all the way
-    back to the application root_.</span>
 
 block heroes-component-cleanup
   //- Only relevant for Dart.
@@ -728,15 +760,26 @@ block heroes-component-cleanup
 +makeExcerpt('app/heroes.component.ts (revised metadata)', 'metadata')
 
 :marked
-  Now we can see what's going on as we update the component class along the same lines as the dashboard:
+  ### Update the _HeroesComponent_ class.
 
-  1. Import the `router`
+  The `HeroesComponent` navigates to the `HeroesDetailComponent` in response to a button click. 
+  The button's _click_ event is bound to a `gotoDetail` method that navigates _imperatively_
+  by telling the router where to go.
+
+  This approach requires some changes to the component class:
+
+  1. Import the `router` from the Angular router library
   1. Inject the `router` in the constructor (along with the `HeroService`)
-  1. Implement the `gotoDetail` method by calling the `router.navigate` method
+  1. Implement `gotoDetail` by calling the `router.navigate` method
 
-  with a two-part hero-detail link parameters !{_array}.
++makeExcerpt('app/heroes.component.ts', 'gotoDetail')
 
-  Here's the revised component class:
+:marked
+  Note that we're passing a two-element **link parameters !{_array}**
+  &mdash; a path and the route parameter &mdash; to
+  the `router.navigate` method just as we did in the `[routerLink]` binding
+  back in the `DashboardComponent`.
+  Here's the fully revised `HeroesComponent` class:
 
 +makeExcerpt('app/heroes.component.ts', 'class')
 
@@ -834,7 +877,7 @@ block css-files
 
 +makeExcerpt('styles.css (excerpt)', 'toh')
 
-- var styles_css = 'https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/styles.css'
+- var styles_css = 'https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/_boilerplate/styles.css'
 
 :marked
   Create the file <span ngio-ex>styles.css</span>, if it doesn't exist already.
@@ -859,7 +902,7 @@ figure.image-display
 
 block file-tree-end
   .filetree
-    .file angular2-tour-of-heroes
+    .file angular-tour-of-heroes
     .children
       .file app
       .children
@@ -895,12 +938,13 @@ block file-tree-end
 
   We travelled a great distance in this chapter
 
-  - We added the Angular *Component Router* to navigate among different components.
+  - We added the Angular *Router* to navigate among different components.
   - We learned how to create router links to represent navigation menu items.
   - We used router link parameters to navigate to the details of user selected hero.
   - We shared the `HeroService` among multiple components.
   - We moved HTML and CSS out of the component file and into their own files.
   - We added the `uppercase` pipe to format data.
+  <li if-docs="ts"> We refactored routes into a `Routing Module` that we import.</li>
 
   ### The Road Ahead
 
diff --git a/public/docs/ts/_cache/tutorial/toh-pt6.jade b/public/docs/ts/_cache/tutorial/toh-pt6.jade
index 007e6e77f7..b6bbf982a7 100644
--- a/public/docs/ts/_cache/tutorial/toh-pt6.jade
+++ b/public/docs/ts/_cache/tutorial/toh-pt6.jade
@@ -12,8 +12,6 @@ block includes
 - var _promise = _Promise.toLowerCase()
 
 :marked
-  # Getting and Saving Data
-
   Our stakeholders appreciate our progress.
   Now they want to get the hero data from a server, let users add, edit, and delete heroes,
   and save these changes back to the server.
@@ -155,7 +153,7 @@ block get-heroes-details
     *Observables* are a powerful way to manage asynchronous data flows.
     We'll learn about [Observables](#observables) later in this chapter.
 
-    For *now* we get back on familiar ground by immediately by
+    For *now* we get back on familiar ground by immediately
     converting that `Observable` to a `Promise` using the `toPromise` operator.
 
   +makeExcerpt('app/hero.service.ts', 'to-promise', '')
@@ -219,7 +217,7 @@ block get-heroes-details
   Although we made significant *internal* changes to `getHeroes()`, the public signature did not change.
   We still return a !{_Promise}. We won't have to update any of the components that call `getHeroes()`.
 
-  Our stakeholders are thrilled with the added flexibility from the API integration. 
+  Our stakeholders are thrilled with the added flexibility from the API integration.
   Now they want the ability to create and delete heroes.
 
   Let's see first what happens when we try to update a hero's details.
@@ -229,7 +227,7 @@ block get-heroes-details
   ## Update hero details
 
   We can edit a hero's name already in the hero detail view. Go ahead and try
-  it. As we type, the hero name is updated in the view heading. 
+  it. As we type, the hero name is updated in the view heading.
   But when we hit the `Back` button, the changes are lost!
 
 .l-sub-section
@@ -294,7 +292,11 @@ block get-heroes-details
   When the given name is non-blank, the handler delegates creation of the
   named hero to the hero service, and then adds the new hero to our !{_array}.
 
-  Go ahead, refresh the browser and create some new heroes!
+  Finally, we implement the `create` method in the `HeroService` class.
++makeExcerpt('app/hero.service.ts', 'create')
+
+:marked
+  Refresh the browser and create some new heroes!
 
 .l-main-section
 :marked
@@ -344,6 +346,7 @@ block get-heroes-details
 :marked
   Refresh the browser and try the new delete functionality.
 
+#observables
 :marked
   ## !{_Observable}s
 
@@ -510,7 +513,7 @@ block observable-transformers
 - var _declarations = _docsFor == 'dart' ? 'directives' : 'declarations'
 - var declFile = _docsFor == 'dart' ? 'app/dashboard.component.ts' : 'app/app.module.ts'
 :marked
-  Finally, we import `HeroSearchComponent` from 
+  Finally, we import `HeroSearchComponent` from
   <span ngio-ex>hero-search.component.ts</span>
   and add it to the `!{_declarations}` !{_array}:
 
@@ -532,7 +535,7 @@ figure.image-display
 
 block filetree
   .filetree
-    .file angular2-tour-of-heroes
+    .file angular-tour-of-heroes
     .children
       .file app
       .children
@@ -577,7 +580,7 @@ block filetree
   - We configured an in-memory web API.
   - We learned how to use !{_Observable}s.
 
-  Here are the files we added or changed in this chapter.
+  Here are the files we _added or changed_ in this chapter.
 
 block file-summary
   +makeTabs(
diff --git a/public/docs/ts/latest/_data.json b/public/docs/ts/latest/_data.json
index 3270bdb011..71d3e2cded 100644
--- a/public/docs/ts/latest/_data.json
+++ b/public/docs/ts/latest/_data.json
@@ -4,7 +4,7 @@
     "title": "Angular Docs",
     "subtitle": "TypeScript",
     "menuTitle": "Docs Home",
-    "banner": "Angular release is <b>2.1</b>. Learn about the latest <a href='guide/change-log.html' title='Documentation change log'>updates to the documentation</a>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank' title='Angular Product Changes'>Angular change log</a> for enhancements, fixes, and breaking changes in Angular itself."
+    "banner": "The latest Angular release is <b>2.2</b>. Learn about the latest <a href='guide/change-log.html' title='Documentation change log'>updates to the documentation</a>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank' title='Angular Product Changes'>Angular change log</a> for enhancements, fixes, and breaking changes in Angular itself."
   },
 
   "cli-quickstart": {
diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
index 7a45a91e77..78b159e40c 100644
--- a/public/docs/ts/latest/cookbook/_data.json
+++ b/public/docs/ts/latest/cookbook/_data.json
@@ -58,7 +58,7 @@
 
   "ts-to-js": {
     "title": "TypeScript to JavaScript",
-    "intro": "Convert Angular TypeScript examples into ES5 JavaScript"
+    "intro": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript"
   },
 
   "visual-studio-2015": {
diff --git a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
index b705283c90..ebca6c41ce 100644
--- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
+++ b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade
@@ -77,7 +77,7 @@ table(width="100%")
         Many (but not all) of the built-in filters from Angular&nbsp;1 are
         built-in pipes in Angular&nbsp;2.
 
-        For more information, see the heading [Filters/pipes](#Pipes) below.
+        For more information, see the heading [Filters/pipes](#filters-pipes) below.
   tr(style=top)
     td
       :marked
diff --git a/public/docs/ts/latest/cookbook/aot-compiler.jade b/public/docs/ts/latest/cookbook/aot-compiler.jade
index dbf6c1c7b9..e59218f4fc 100644
--- a/public/docs/ts/latest/cookbook/aot-compiler.jade
+++ b/public/docs/ts/latest/cookbook/aot-compiler.jade
@@ -341,9 +341,11 @@ a#toh
 
   Fortunately, the source code can be compiled either way without change _if_ you account for a few key differences.
 
-  ***Index.html***
+  ***index.html***
 
-  The JiT and AoT apps are setup and launched so differently that they require their own `index.html` files. 
+  The JiT and AoT apps require their own `index.html` files because they setup and launch so differently. 
+  **Put the AoT version in the `/aot` folder** because two `index.html` files can't be in the same folder. 
+  
   Here they are for comparison:
 
 +makeTabs(
@@ -355,35 +357,47 @@ a#toh
 )
 
 :marked
-  They can't be in the same folder. 
-  ***Put the AoT version in the `/aot` folder***.
-
   The JiT version relies on `SystemJS` to load individual modules and requires the `reflect-metadata` shim. 
   Both scripts appear in its `index.html`.
 
   The AoT version loads the entire application in a single script, `aot/dist/build.js`.
   It does not need `SystemJS` or the `reflect-metadata` shim; those scripts are absent from its `index.html`
+  
+  ***main.ts***
+  
+  JiT and AoT applications boot in much the same way but require different Angular libraries to do so.
+  The key differences, covered in the [Bootstrap](#bootstrap) section above,
+  are evident in these `main` files which can and should reside in the same folder: 
 
-  *Component-relative Template URLS*
++makeTabs(
+  `toh-6/ts/app/main-aot.ts,
+   toh-6/ts/app/main.ts`,
+  null,
+  `app/main-aot.ts (AoT),
+   app/main.ts (JiT)`
+)
+
+:marked
+  ***Component-relative Template URLS***
 
   The AoT compiler requires that `@Component` URLS for external templates and css files be _component-relative_.
-  That means that the value of `@Component.templateUrl` is a URL value relative to the component class file:
-  `foo.component.html` no matter where `foo.component.ts` sits in the project folder structure.
+  That means that the value of `@Component.templateUrl` is a URL value _relative_ to the component class file.
+  For example, a `'hero.component.html'` URL means that the template file is a sibling of its companion `hero.component.ts` file.
 
   While JiT app URLs are more flexible, stick with _component-relative_ URLs for compatibility with AoT compilation.
   
-  JiT-compiled apps, using the SystemJS loader and _component-relative_ URLs *must set the* `@Component.moduleId` *property to* `module.id`.
+  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 unless you assign a global `module` value in the `index.html` like this:
+  The app fails with a null reference error unless you assign a global `module` value in the `index.html` like this:
 +makeExample('toh-6/ts/aot/index.html','moduleId')(format='.')  
 .l-sub-section
   :marked
     Setting a global `module` is a temporary expedient. 
 :marked
-  *TypeScript configuration*
+  ***TypeScript configuration***
 
-  JiT-compiled apps transpile to `commonjs` modules.
-  AoT-compiled apps transpile to _ES2015_/_ES6_ modules to facilitate Tree Shaking. 
+  JiT-compiled applications transpile to `commonjs` modules.
+  AoT-compiled applications transpile to _ES2015_/_ES6_ modules to facilitate Tree Shaking. 
   AoT requires its own TypeScript configuration settings as well.
 
   You'll need separate TypeScript configuration files such as these:
@@ -396,6 +410,17 @@ a#toh
    tsconfig.json (JiT)`
 )
 
+.callout.is-helpful
+  header @Types and node modules
+  :marked
+    In the file structure of _this particular sample project_,
+    the `node_modules` folder happens to be two levels up from the project root. 
+    Therefore, `"typeRoots"` must be set to `"../../node_modules/@types/"`. 
+    
+    In a more typical project, `node_modules` would be a sibling of `tsconfig-aot.json`
+    and `"typeRoots"` would be set to `"node_modules/@types/"`.
+    Edit your `tsconfig-aot.json` to fit your project's file structure.
+
 :marked
   ### Tree Shaking
 
diff --git a/public/docs/ts/latest/cookbook/ts-to-js.jade b/public/docs/ts/latest/cookbook/ts-to-js.jade
index 2e00a56272..d34dbf8868 100644
--- a/public/docs/ts/latest/cookbook/ts-to-js.jade
+++ b/public/docs/ts/latest/cookbook/ts-to-js.jade
@@ -1 +1,669 @@
-include ../../../js/latest/cookbook/ts-to-js
+include ../../../../_includes/_util-fns
+
+:marked
+  Anything you can do with Angular in _TypeScript_, you can also do
+  in JavaScript. Translating from one language to the other is mostly a
+  matter of changing the way you organize your code and access Angular APIs.
+
+  _TypeScript_ is a popular language option for Angular development. 
+  Most code examples on the Internet as well as on this site are written in _TypeScript_. 
+  This cookbook contains recipes for translating _TypeScript_
+  code examples to _ES6_ and to _ES5_ so that JavaScript developers
+  can read and write Angular apps in their preferred dialect.
+
+a#toc
+:marked
+  ## Table of contents
+
+  [_TypeScript_ to _ES6_ to _ES5_](#from-ts)<br>
+  [Modularity: imports and exports](#modularity)<br>
+  [Classes and Class Metadata](#class-metadata)<br>
+  [_ES5_ DSL](#dsl)<br>
+  [Interfaces](#interfaces)<br>
+  [Input and Output Metadata](#io-decorators)<br>
+  [Dependency Injection](#dependency-injection)<br>
+  [Host Binding](#host-binding)<br>
+  [View and Child Decorators](#view-child-decorators)<br>
+  [AoT compilation in _TypeScript_ Only](#aot)<br>
+
+  **Run and compare the live <live-example name="cb-ts-to-js">_TypeScript_</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
+  code shown in this cookbook.**
+
+a#from-ts
+.l-main-section
+:marked
+  ## _TypeScript_ to _ES6_ to _ES5_
+  
+  _TypeScript_ 
+  <a href="https://www.typescriptlang.org" target="_blank" title='"TypeScript is a typed, superset of JavaScript"'>is a typed superset of _ES6 JavaScript_</a>.
+  &nbsp; _ES6 JavaScript_ is a superset of _ES5 JavaScript_. &nbsp; _ES5_ is the kind of JavaScript that runs natively in all modern browsers.
+  The transformation of _TypeScript_ code all the way down to _ES5_ code can be seen as "shedding" features.
+
+  The downgrade progression is
+  * _TypeScript_ to _ES6-with-decorators_
+  * _ES6-with-decorators_ to _ES6-without-decorators_ ("_plain ES6_")
+  * _ES6-without-decorators_ to _ES5_
+
+  When translating from _TypeScript_ to _ES6-with-decorators_, remove 
+  [class property access modifiers](http://www.typescriptlang.org/docs/handbook/classes.html#public-private-and-protected-modifiers)
+  such as `public` and `private`.
+  Remove most of the 
+  [type declarations](https://www.typescriptlang.org/docs/handbook/basic-types.html), 
+  such as `:string` and `:boolean`
+  but **keep the constructor parameter types which are used for dependency injection**.
+   
+
+  From _ES6-with-decorators_ to _plain ES6_, remove all 
+  [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html)
+  and the remaining types.
+  You must declare properties in the class constructor (`this.title = '...'`) rather than in the body of the class.
+
+  Finally, from _plain ES6_ to _ES5_, the main missing features are `import`
+  statements and `class` declarations. 
+
+  For _plain ES6_ transpilation you can _start_ with a setup similar to the 
+  [_TypeScript_ quickstart](https://github.com/angular/quickstart) and adjust the application code accordingly. 
+  Transpile with [Babel](https://babeljs.io/) using the `es2015` preset. 
+  To use decorators and annotations with Babel, install the 
+  [`angular2`](https://github.com/shuhei/babel-plugin-angular2-annotations) preset as well.
+   
+
+a#modularity
+.l-main-section
+:marked
+  ## Importing and Exporting
+
+  ### Importing Angular Code
+
+  In both _TypeScript_ and _ES6_, you import Angular classes, functions, and other members with _ES6_ `import` statements.
+
+  In _ES5_, you access the Angular entities of the [the Angular packages](../glossary.html#!#scoped-package)
+  through the global `ng` object. 
+  Anything you can import from `@angular` is a nested member of this `ng` object:
+
++makeTabs(`
+    cb-ts-to-js/ts/app/app.module.ts,
+    cb-ts-to-js/js-es6-decorators/app/app.module.es6,
+    cb-ts-to-js/js-es6/app/app.module.es6,
+    cb-ts-to-js/js/app/app.module.js
+  `,
+ 'ng2import,ng2import,ng2import,ng2import',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)(format='.')
+
+:marked
+  ### Exporting Application Code
+
+  Each file in a _TypeScript_ or _ES6_ Angular application constitutes an _ES6_ module.
+  When you want to make something available to other modules, you `export` it.
+
+  _ES5_ lacks native support for modules. 
+  In an Angular _ES5_ application, you load each file manually by adding a `<script>` tag to `index.html`. 
+.alert.is-important
+  :marked
+    The order of `<script>` tags is often significant. 
+    You must load a file that defines a public JavaScript entity before a file that references that entity.
+:marked
+  The best practice in _ES5_ is to create a form of modularity that avoids polluting the global scope. 
+  Add one application namespace object such as `app` to the global `document`.
+  Then each code file "exports" public entities by attaching them to that namespace object, e.g., `app.HeroComponent`.
+  You could factor a large application into several sub-namespaces 
+  which leads to "exports" along the lines of `app.heroQueries.HeroComponent`.
+  
+  Every _ES5_ file should wrap code in an 
+  [Immediately Invoked Function Expression (IIFE)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
+  to limit unintentional leaking of private symbols into the global scope.
+  
+  Here is a `HeroComponent` as it might be defined and "exported" in each of the four language variants.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
+    cb-ts-to-js/js-es6/app/hero.component.es6,
+    cb-ts-to-js/js/app/hero.component.js
+  `,
+  'appexport,appexport,appexport,appexport',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+:marked
+  ### Importing Application Code
+
+  In _TypeScript_ and _ES6_ apps, you `import` things that have been exported from other modules.
+
+  In _ES5_ you use the shared namespace object to access "exported" entities from other files.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/app.module.ts,
+    cb-ts-to-js/js-es6-decorators/app/app.module.es6,
+    cb-ts-to-js/js-es6/app/app.module.es6,
+    cb-ts-to-js/js/app/app.module.js
+  `,
+  'appimport,appimport,appimport,appimport',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)(format='.')
+
+.alert.is-helpful
+  :marked
+    Alternatively, you can use a module loader such as Webpack or
+    Browserify in an Angular JavaScript project. In such a project, you would
+    use _CommonJS_ modules and the `require` function to load Angular framework code.
+    Then use `module.exports` and `require` to export and import application  code.
+
+
+a#class-metadata
+.l-main-section
+:marked
+  ## Classes and Class Metadata
+
+  ### Classes
+
+  Most Angular _TypeScript_ and _ES6_ code is written as classes.
+
+  Properties and method parameters of _TypeScript_ classes may be marked with the access modifiers
+  `private`, `internal`, and `public`. 
+  Remove these modifiers when translating to JavaScript.
+
+  Most type declarations (e.g, `:string` and `:boolean`) should be removed when translating to JavaScript.
+  When translating to _ES6-with-decorators_, ***do not remove types from constructor parameters!***
+  
+  Look for types in _TypeScript_ property declarations.
+  In general it is better to initialize such properties with default values because
+  many browser JavaScript engines can generate more performant code.
+  When _TypeScript_ code follows this same advice, it can infer the property types
+  and there is nothing to remove during translation. 
+
+  In _ES6-without-decorators_, properties of classes must be assigned inside the constructor.
+
+  _ES5_ JavaScript has no classes. 
+  Use the constructor function pattern instead, adding methods to the prototype.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
+    cb-ts-to-js/js-es6/app/hero.component.es6,
+    cb-ts-to-js/js/app/hero.component.js
+  `,
+  'class,class,class,constructorproto',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+:marked
+  ### Metadata
+
+  When writing in _TypeScript_ or _ES6-with-decorators_, 
+  provide configuration and metadata by adorning a class with one or more *decorators*. 
+  For example, you supply metadata to a component class by preceding its definition with a
+  [`@Component`](../api/core/index/Component-decorator.html) decorator function whose
+  argument is an object literal with metadata properties.
+
+  In _plain ES6_, you provide metadata by attaching an `annotations` array to the _class_.
+  Each item in the array is a new instance of a metadata decorator created with a similar metadata object literal.
+  
+  In _ES5_, you also provide an `annotations` array but you attach it to the _constructor function_ rather than to a class.
+
+  See these variations side-by-side:
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero.component.es6,
+    cb-ts-to-js/js-es6/app/hero.component.es6,
+    cb-ts-to-js/js/app/hero.component.js
+  `,
+  'metadata,metadata,metadata,metadata',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)
+
+:marked
+  ***External Template file***
+
+  A large component template is often kept in a separate template file.
++makeExample('cb-ts-to-js/ts/app/hero-title.component.html', '', 'app/hero-title.component.html')(format='.')
+:marked
+  The component (`HeroTitleComponent` in this case) then references the template file in its metadata `templateUrl` property:
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-title.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6,
+    cb-ts-to-js/js-es6/app/hero-title.component.es6,
+    cb-ts-to-js/js/app/hero-title.component.js`,
+  'templateUrl, templateUrl, templateUrl, templateUrl',
+  `TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript
+  `)(format='.')
+
+:marked
+  Note that the _TypeScript_ and both _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
+:marked
+  ## _ES5_ DSL
+
+  This _ES5_ pattern of creating a constructor and annotating it with metadata is so common that Angular 
+  provides a convenience API to make it a little more compact and locates the metadata above the constructor, 
+  as you would if you wrote in _TypeScript_ or _ES6-with-decorators_.
+
+  This _API_ (_Application Programming Interface_) is commonly known as the _ES5 DSL_ (_Domain Specific Language_).
+
+  Set an application namespace property (e.g., `app.HeroDslComponent`) to the result of an `ng.core.Component` function call.
+  Pass the same metadata object to `ng.core.Component` as you did before.
+  Then chain a call to the `Class` method which takes an object defining the class constructor and instance methods.
+
+  Here is an example of the `HeroComponent`, re-written with the DSL,
+  next to the original _ES5_ version for comparison:
+
++makeTabs(`
+    cb-ts-to-js/js/app/hero.component.js,
+    cb-ts-to-js/js/app/hero.component.js
+  `,
+  'dsl,',
+  `
+    ES5 JavaScript with DSL,
+    ES5 JavaScript
+  `)
+
+.callout.is-helpful
+  header Name the constructor
+  :marked
+    A **named** constructor displays clearly in the console log
+    if the component throws a runtime error. 
+    An **unnamed** constructor displays as an anonymous function (e.g., `class0`) 
+    which is impossible to find in the source code.
+
+:marked
+  ### Properties with getters and setters
+
+  _TypeScript_ and _ES6_ support with getters and setters.
+  Here's an example of a read-only _TypeScript_ property with a getter
+  that prepares a toggle-button label for the next clicked state:
++makeExample('cb-ts-to-js/ts/app/hero-queries.component.ts', 'defined-property', 'ts/app/hero-queries.component.ts')(format='.')
+
+:marked
+  This _TypeScript_ "getter" property is transpiled to an _ES5_
+  <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"
+     target="_blank" title="Defined Properties">defined property</a>.
+  The _ES5 DSL_ does not support _defined properties_ directly
+  but you can still create them by extracting the "class" prototype and
+  adding the _defined property_ in raw JavaScript like this:
++makeExample('cb-ts-to-js/js/app/hero-queries.component.js', 'defined-property','js/app/hero-queries.component.ts')(format='.')
+
+:marked
+  ### DSL for other classes
+  There are similar DSLs for other decorated classes. 
+  You can define a directive with `ng.core.Directive`: 
+
+code-example.
+  app.MyDirective = ng.core.Directive({
+    selector: '[myDirective]'
+  }).Class({
+    ...
+  });
+:marked
+  and a pipe with `ng.core.Pipe`:
+code-example.  
+  app.MyPipe = ng.core.Pipe({
+    name: 'myPipe'
+  }).Class({
+    ...
+  });
+
+a#interfaces
+.l-main-section
+:marked
+  ## Interfaces
+
+  A _TypeScript_ interface helps ensure that a class implements the interface's members correctly.
+  We strongly recommend Angular interfaces where appropriate. 
+  For example, the component class that implements the `ngOnInit` lifecycle hook method
+  should implement the `OnInit` interface.
+
+  _TypeScript_ interfaces exist for developer convenience and are not used by Angular at runtime.
+  They have no physical manifestation in the generated JavaScript code.
+  Just implement the methods and ignore interfaces when translating code samples from _TypeScript_ to JavaScript.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-lifecycle.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-lifecycle.component.es6,
+    cb-ts-to-js/js-es6/app/hero-lifecycle.component.es6,
+    cb-ts-to-js/js/app/hero-lifecycle.component.js,
+    cb-ts-to-js/js/app/hero-lifecycle.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)  
+
+a#io-decorators
+.l-main-section
+:marked
+  ## Input and Output Metadata
+
+  ### Input and Output Decorators
+
+  In _TypeScript_ and _ES6-with-decorators_, you often add metadata to class _properties_ with _property decorators_.
+  For example, you apply [`@Input` and `@Output` property decorators](../guide/template-syntax.html#inputs-outputs) 
+  to public class properties that will be the target of data binding expressions in parent components.
+
+  There is no equivalent of a property decorator in _ES5_ or _plain ES6_. 
+  Fortunately, every property decorator has an equivalent representation in a class decorator metadata property.
+  A _TypeScript_ `@Input` property decorator can be represented by an item in the `Component` metadata's `inputs` array.
+  
+  You already know how to add `Component` or `Directive` class metadata in _any_ JavaScript dialect so
+  there's nothing fundamentally new about adding another property. 
+  But note that what would have been _separate_ `@Input` and `@Output` property decorators for each class property are
+  combined in the metadata `inputs` and `outputs` _arrays_.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/confirm.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/confirm.component.es6,
+    cb-ts-to-js/js-es6/app/confirm.component.es6,
+    cb-ts-to-js/js/app/confirm.component.js,
+    cb-ts-to-js/js/app/confirm.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+:marked
+  In the previous example, one of the public-facing binding names (`cancelMsg`) 
+  differs from the corresponding class property name (`notOkMsg`).
+  That's OK but you must tell Angular about it so that it can map an external binding of `cancelMsg`
+  to the component's `notOkMsg` property.
+  
+  In _TypeScript_ and _ES6-with-decorators_, 
+  you specify the special binding name in the argument to the property decorator.
+  
+  In _ES5_ and _plain ES6_ code, convey this pairing with the `propertyName: bindingName` syntax in the class metadata.
+  
+.l-main-section
+:marked
+  ## Dependency Injection
+  Angular relies heavily on [Dependency Injection](../guide/dependency-injection.html) to provide services to the objects it creates.
+  When Angular creates a new component, directive, pipe or another service, 
+  it sets the class constructor parameters to instances of services provided by an _Injector_.
+
+  The developer must tell Angular what to inject into each parameter.
+
+  ### Injection by Class Type
+
+  The easiest and most popular technique in _TypeScript_ and _ES6-with-decorators_ is to set the constructor parameter type
+  to the class associated with the service to inject. 
+  
+  The _TypeScript_ transpiler writes parameter type information into the generated JavaScript.
+  Angular reads that information at runtime and locates the corresponding service in the appropriate _Injector_..
+  The _ES6-with-decorators_ transpiler does essentially the same thing using the same parameter-typing syntax.
+
+  _ES5_ and _plain ES6_ lack types so you must identify "injectables" by attaching a **`parameters`** array to the constructor function. 
+  Each item in the array specifies the service's injection token.
+
+  As with _TypeScript_ the most popular token is a class, 
+  or rather a _constructor function_ that represents a class in _ES5_ and _plain ES6_.
+  The format of the `parameters` array varies:
+  
+  * _plain ES6_ &mdash; nest each constructor function in a sub-array.
+
+  * _ES5_ &mdash; simply list the constructor functions.
+
+  When writing with _ES5 DSL_, set the `Class.constructor` property to
+  an array whose first parameters are the injectable constructor functions and whose
+  last parameter is the class constructor itself. 
+  This format should be familiar to Angular 1 developers.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-di.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-di.component.es6,
+    cb-ts-to-js/js-es6/app/hero-di.component.es6,
+    cb-ts-to-js/js/app/hero-di.component.js,
+    cb-ts-to-js/js/app/hero-di.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+
+:marked
+  ### Injection with the @Inject decorator
+
+  Sometimes the dependency injection token isn't a class or constructor function.
+  
+  In _TypeScript_ and _ES6-with-decorators_, you precede the class constructor parameter
+  by calling the `@Inject()` decorator with the injection token.
+  In the following example, the token is the string `'heroName'`.
+
+  The other JavaScript dialogs add a `parameters` array to the class contructor function.
+  Each item constains a new instance of `Inject('heroName')`:
+  
+  * _plain ES6_ &mdash; each item is a new instance of `Inject(token)` in a sub-array.
+
+  * _ES5_ &mdash; simply list the string tokens.
+
+  When writing with _ES5 DSL_, set the `Class.constructor` property to a function definition
+  array as before. Create a `new ng.core.Inject(token)` for each parameter. 
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-di-inject.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-di-inject.component.es6,
+    cb-ts-to-js/js-es6/app/hero-di-inject.component.es6,
+    cb-ts-to-js/js/app/hero-di-inject.component.js,
+    cb-ts-to-js/js/app/hero-di-inject.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+
+:marked
+  ### Additional Injection Decorators
+
+  You can qualify injection behavior with injection decorators from `@angular/core`.
+
+  In _TypeScript_ and _ES6-with-decorators_, 
+  you precede the constructor parameters with injection qualifiers such as:
+  * [`@Optional`](../api/core/index/Optional-decorator.html) sets the parameter to `null` if the service is missing
+  * [`@Attribute`](../api/core/index/Attribute-interface.html) to inject a host element attribute value
+  * [`@ContentChild`](../api/core/index/ContentChild-decorator.html) to inject a content child
+  * [`@ViewChild`](../api/core/index/ViewChild-decorator.html) to inject a view child
+  * [`@Host`](../api/core/index/Host-decorator.html) to inject a service in this component or its host
+  * [`@SkipSelf`](../api/core/index/SkipSelf-decorator.html) to inject a service provided in an ancestor of this component
+
+  In _plain ES6_ and _ES5_, create an instance of the equivalent injection qualifier in a nested array within the `parameters` array.
+  For example, you'd write `new Optional()` in _plain ES6_ and `new ng.core.Optional()` in _ES5_.
+  
+
+  When writing with _ES5 DSL_, set the `Class.constructor` property to a function definition
+  array as before. Use a nested array to define a parameter's complete injection specification.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-title.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-title.component.es6,
+    cb-ts-to-js/js-es6/app/hero-title.component.es6,
+    cb-ts-to-js/js/app/hero-title.component.js,
+    cb-ts-to-js/js/app/hero-title.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+.l-sub-section
+  :marked
+    In the example above, there is no provider for the `'titlePrefix'` token.
+    Without `Optional`, Angular would raise an error.
+    With `Optional`, Angular sets the constructor parameter to `null` 
+    and the component displays the title without a prefix.
+
+a#host-binding
+.l-main-section
+:marked
+  ## Host Binding
+  Angular supports bindings to properties and events of the _host element_ which is the
+  element whose tag matches the component selector.
+
+  ### Host Decorators
+
+  In _TypeScript_ and _ES6-with-decorators_, you can use host property decorators to bind a host
+  element to a component or directive.
+  The [`@HostBinding`](../api/core/index/HostBinding-interface.html) decorator
+  binds host element properties to component data properties. 
+  The [`@HostListener`](../api/core/index/HostListener-interface.html) decorator binds
+  host element events to component event handlers.
+
+  In _plain ES6_ or _ES5_, add a `host` attribute to the component metadata to achieve the
+  same effect as `@HostBinding` and `@HostListener`. 
+  
+  The  `host` value is an object whose properties are host property and listener bindings:
+  
+  * Each key follows regular Angular binding syntax: `[property]` for host bindings
+    or `(event)` for host listeners.
+  * Each value identifies the corresponding component property or method.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-host.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-host.component.es6,
+    cb-ts-to-js/js-es6/app/hero-host.component.es6,
+    cb-ts-to-js/js/app/hero-host.component.js,
+    cb-ts-to-js/js/app/hero-host.component.js
+  `,
+  ',,,,dsl',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+
+:marked
+  ### Host Metadata
+  Some developers prefer to specify host properties and listeners
+  in the component metadata. 
+  They'd _rather_ do it the way you _must_ do it _ES5_ and _plain ES6_.
+
+  The following re-implementation of the `HeroComponent` reminds us that _any property metadata decorator_
+  can be expressed as component or directive metadata in both _TypeScript_ and _ES6-with-decorators_.
+  These particular _TypeScript_ and _ES6_ code snippets happen to be identical.
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-host-meta.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-host-meta.component.es6
+  `,
+  '',
+  ` TypeScript,
+    ES6 JavaScript with decorators
+  `)
+
+a#view-child-decorators
+.l-main-section
+:marked
+  ### View and Child Decorators
+  
+  Several _property_ decorators query a component's nested view and content components.
+  
+.l-sub-section
+  :marked
+     _View_ children are associated with element tags that appear _within_ the component's template.
+     
+     _Content_ children are associated with elements that appear _between_ the component's element tags;
+     they are projected into an `<ng-content>` slot in the component's template.     
+:marked
+  The [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
+  [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html) property decorators
+  allow a component to query instances of other components that are used in
+  its view. 
+
+  In _ES5_ and _ES6_, you access a component's view children by adding a `queries` property to the component metadata. 
+  The `queries` property value is a hash map.
+
+  * each _key_ is the name of a component property that will hold the view child or children.
+  * each _value_ is a new instance of either `ViewChild` or `ViewChildren`.
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-queries.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6,
+    cb-ts-to-js/js-es6/app/hero-queries.component.es6,
+    cb-ts-to-js/js/app/hero-queries.component.js
+  `,
+  'view, view, view, view',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+
+:marked
+  The [`@ContentChild`](../api/core/index/ContentChild-decorator.html) and
+  [`@ContentChildren`](../api/core/index/ContentChildren-decorator.html) property decorators
+  allow a component to query instances of other components that have been projected
+  into its view from elsewhere.
+
+  They can be added in the same way as [`@ViewChild`](../api/core/index/ViewChild-decorator.html) and
+  [`@ViewChildren`](../api/core/index/ViewChildren-decorator.html).
+
++makeTabs(`
+    cb-ts-to-js/ts/app/hero-queries.component.ts,
+    cb-ts-to-js/js-es6-decorators/app/hero-queries.component.es6,
+    cb-ts-to-js/js-es6/app/hero-queries.component.es6,
+    cb-ts-to-js/js/app/hero-queries.component.js
+  `,
+  'content, content, content, content',
+  ` TypeScript,
+    ES6 JavaScript with decorators,
+    ES6 JavaScript,
+    ES5 JavaScript with DSL
+  `)
+
+.alert.is-helpful
+  :marked
+    In _TypeScript_ and _ES6-with-decorators_ you can also use the `queries` metadata 
+    instead of the `@ViewChild` and `@ContentChild` property decorators.    
+
+a#aot
+.l-main-section
+:marked
+  ## AoT Compilation in _TypeScript_ only
+
+  Angular offers two modes of template compilation, JiT (_Just-in-Time_) and 
+  [AoT (_Ahead-of-Time_)](aot-compiler.html).
+  Currently the AoT compiler only works with _TypeScript_ applications because, in part, it generates
+  _TypeScript_ files as an intermediate result.
+  **AoT is not an option for pure JavaScript applications** at this time.
diff --git a/public/docs/ts/latest/guide/change-log.jade b/public/docs/ts/latest/guide/change-log.jade
index 5b37b8f0bb..a58b98f747 100644
--- a/public/docs/ts/latest/guide/change-log.jade
+++ b/public/docs/ts/latest/guide/change-log.jade
@@ -7,6 +7,20 @@ block includes
   The Angular documentation is a living document with continuous improvements.
   This log calls attention to recent significant changes.
 
+  ## Sync with Angular v.2.2.0 (2016-11-14)
+  Docs and code samples updated and tested with Angular v.2.2.0 
+
+  ## UPDATE: NgUpgrade Guide reflects the new v.2.2.0 adapters (2016-11-14)
+  The updated [NgUpgrade Guide](upgrade.html) guide covers the 
+  new `NgUpgradeModule` released in v.2.2.0 which replaces the
+  ***now deprecated*** upgrade facilities prior to v.2.2.0.
+
+  ## ES6  described in "TypeScript to JavaScript" (2016-11-14)
+  The updated "[TypeScript to JavaScript](../cookbook/ts-to-js.html)" cookbook 
+  now explains how to write apps in ES6/7
+  by translating the common idioms in the TypeScript documentation examples
+  (and elsewhere on the web) to ES6/7 and ES5.
+
   ## Sync with Angular v.2.1.1 (2016-10-21)
   Docs and code samples updated and tested with Angular v.2.1.0 
 
diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade
index ec54abf0dd..f64babf029 100644
--- a/public/docs/ts/latest/guide/dependency-injection.jade
+++ b/public/docs/ts/latest/guide/dependency-injection.jade
@@ -388,7 +388,7 @@ block ctor-syntax
   We call that property within our `getHeroes` method when anyone asks for heroes.
 
 //- FIXME refer to Dart API when that page becomes available.
-- var injUrl = 'https://angular.io/docs/ts/latest/api/core/index/Injectable-decorator.html';
+- var injUrl = '../api/core/index/Injectable-decorator.html';
 h3#injectable Why @Injectable()?
 :marked
   **<a href="#{injUrl}">@Injectable()</a>** marks a class as available to an
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index 5f000d7bbc..8ce4250962 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -340,7 +340,7 @@ figure.image-display
 .l-sub-section
   :marked
     - Each input element has an `id` property that is used by the `label` element's `for` attribute
-    to match the label to it's input control.
+    to match the label to its input control.
     - Each input element has a `name` property that is required by Angular Forms to register the control with the form.
 
 :marked
diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade
index 6af522624c..3772e35799 100644
--- a/public/docs/ts/latest/guide/index.jade
+++ b/public/docs/ts/latest/guide/index.jade
@@ -1,16 +1,14 @@
 block includes
   include ../_util-fns
 
-- var langName = current.path[1] == 'ts' ? 'TypeScript' : 'JavaScript'
 figure
-  img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px" )
+  img(src="/resources/images/devguide/intro/people.png" alt="Us" align="left" style="width:200px; margin-left:-40px;margin-right:10px")
+
 :marked
   This is a practical guide to Angular for experienced programmers who
-  are building client applications in HTML and #{langName}.
+  are building client applications in HTML and #{_Lang}.
+  <br style="clear:left;">
 
-  <br clear="all">
-
-<a id="learning-path"></a>
 :marked
   # Organization
 
diff --git a/public/docs/ts/latest/guide/npm-packages.jade b/public/docs/ts/latest/guide/npm-packages.jade
index 148be03d90..a549d82e1a 100644
--- a/public/docs/ts/latest/guide/npm-packages.jade
+++ b/public/docs/ts/latest/guide/npm-packages.jade
@@ -74,7 +74,7 @@ a(id="dependencies")
   ***@angular/platform-browser*** - Everything DOM and browser related, especially the pieces that help render into DOM.
   This package also includes the bootstrapStatic method for bootstrapping applications for production builds that pre-compile templates offline.
   
-  ***@angular/platform-browser-dynamic*** - Includes [Providers](https://angular.io/docs/ts/latest/api/core/index/Provider-type-alias.html) and a [bootstrap](https://angular.io/docs/ts/latest/guide/ngmodule.html#!#bootstrap) method for applications that
+  ***@angular/platform-browser-dynamic*** - Includes [Providers](../api/core/index/Provider-type-alias.html) and a [bootstrap](ngmodule.html#!#bootstrap) method for applications that
   compile templates on the client. Don’t use offline compilation.
   Use this package for bootstrapping during development and for bootstrapping plunker samples.
   
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index a1885b6afe..16a67cac35 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -143,10 +143,10 @@ include ../_util-fns
   ### Router Outlet
   Given this configuration, when the browser URL for this application becomes `/heroes`,
   the router matches that URL to the `Route` path `/heroes` and displays the `HeroListComponent`
-  in a **`RouterOutlet`** that we've placed in the host view's HTML.
+  ***after*** a **`RouterOutlet`** that we've placed in the host view's HTML.
 code-example(language="html").
-  &lt;!-- Routed views go here -->
   &lt;router-outlet>&lt;/router-outlet>
+  &lt;!-- Routed views go here -->
 :marked
   ### Router Links
   Now we have routes configured and a place to render them, but
@@ -445,7 +445,7 @@ h4#define-routes Define routes
   :marked
     Adding the configured `RouterModule` to the `AppModule` is sufficient for simple route configurations.
     As our application grows, we'll want to refactor our routing configuration into a separate file
-    and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicating for the purpose
+    and create a **[Routing Module](#routing-module)**, a special type of `Service Module` dedicated for the purpose
     of routing in feature modules.
 
 :marked
@@ -874,6 +874,11 @@ h3#activated-route ActivatedRoute: the one-stop-shop for route information
 
 +makeExcerpt('app/heroes/hero-detail.component.1.ts (activated route)', 'imports')
 
+:marked
+  We import the `switchMap` operator because we need it later to process the `Observable` route parameters.
+
++makeExcerpt('app/heroes/hero-detail.component.1.ts (switchMap operator import)', 'rxjs-operator-import')
+
 a#hero-detail-ctor
 :marked
   As usual, we write a constructor that asks Angular to inject services
@@ -882,13 +887,22 @@ a#hero-detail-ctor
 +makeExcerpt('app/heroes/hero-detail.component.ts (constructor)', 'ctor')
 
 :marked
-  Later, in the `ngOnInit` method,
-  we use the `ActivatedRoute` service to retrieve the parameters for our route.
-  Since our parameters are provided as an `Observable`, we use the _forEach_ method to retrieve them for the `id` parameter by name and
-  tell the `HeroService` to fetch the hero with that `id`.
+  Later, in the `ngOnInit` method, we use the `ActivatedRoute` service to retrieve the parameters
+  for our route. Since our parameters are provided as an `Observable`, we use the _switchMap_ operator to
+  provide them for the `id` parameter by name and tell the `HeroService` to fetch the hero with that `id`.
 
 +makeExcerpt('app/heroes/hero-detail.component.ts (ngOnInit)', 'ngOnInit')
 
+.l-sub-section
+  :marked
+    The `switchMap` operator allows you to perform an action with the current value of the `Observable`,
+    and map it to a new `Observable`. As with many `rxjs` operators, `switchMap` handles
+    an `Observable` as well as a `Promise` to retrieve the value they emit.
+
+    The `switchMap` operator will also cancel any in-flight requests if our user re-navigates to the route
+    while still retrieving a hero. Our `Observable` is _cold_ until subscribed to, so we use the `subscribe` method
+    to get and set our retrieved `Hero`.
+
 .l-sub-section
   :marked
     Angular calls the `ngOnInit` method shortly after creating an instance of the `HeroDetailComponent`.
@@ -1096,10 +1110,20 @@ code-example(language="bash").
 +makeExcerpt('app/heroes/hero-list.component.ts (import)', 'import-router')
 
 :marked
-  Then we use the `ActivatedRoute` to access the `params` _Observable_ so we can subscribe
-  and extract the `id` parameter as the `selectedId`:
+  We'll import the `switchMap` operator to perform an operation on our `Observable`
+  of route parameters.
 
-+makeExcerpt('app/heroes/hero-list.component.ts (constructor)', 'ctor')
++makeExcerpt('app/heroes/hero-list.component.ts (rxjs imports)', 'rxjs-imports')
+
+:marked
+  Then we inject the `ActivatedRoute` in the `HeroListComponent` constructor.
+
++makeExcerpt('app/heroes/hero-list.component.ts (constructor and ngOnInit)', 'ctor')
+
+:marked
+  The ActivatedRoute.params property is an Observable of route parameters. The params emits new id values
+  when the user navigates to the component. In ngOnInit we subscribe to those values, set the selectedId,
+  and get the heroes.
 
 .l-sub-section
   :marked
@@ -2150,7 +2174,7 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
 
   The *Router* also supports [custom preloading strategies](#custom-preloading) for fine control over which modules to pre-load.
 
-  We'll update our *CrisisCenterModule* to be loaded lazily by default and use the `PreloadAllModules` strategy 
+  We'll update our *CrisisCenterModule* to be loaded lazily by default and use the `PreloadAllModules` strategy
   to load _all_ lazy loaded modules as soon as possible.
 
 <a id="preload-canload"></a>
@@ -2183,9 +2207,9 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
   `)
 
 :marked
-  The second argument in the `RouterModule.forRoot` method takes an object for additional configuration options. 
+  The second argument in the `RouterModule.forRoot` method takes an object for additional configuration options.
   We import the `PreloadAllModules` token from the router package and set the configuration option's `preloadingStrategy` property
-  with this `PreloadAllModules` token. 
+  with this `PreloadAllModules` token.
   This tells the built-in *Router* pre-loader to immediately load **all** [unguarded](#preload-canload) feature areas that use `loadChildren`.
 
 +makeExcerpt('app/app-routing.module.6.ts (preload all)', '')
@@ -2207,7 +2231,7 @@ h3#preloading <i>Pre-Loading</i>: background loading of feature areas
   Since we want to take advantage of this, we'll add a custom strategy that _only_ preloads the modules we select. We'll enable the preloading by using the *Route Data*,
   which, as we learned, is an object to store arbitrary route data and and [resolve data](#resolve-guard).
 
-  We'll add a custom `preload` boolean to our `crisis-center` route data that we'll use with our custom strategy. To see it in action, we'll add 
+  We'll add a custom `preload` boolean to our `crisis-center` route data that we'll use with our custom strategy. To see it in action, we'll add
   the `route.path` to the `preloadedModules` array in our custom strategy service. We'll also log a message
   to the console for the preloaded module.
 
diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade
index b1ecef666b..7b235e10fe 100644
--- a/public/docs/ts/latest/guide/style-guide.jade
+++ b/public/docs/ts/latest/guide/style-guide.jade
@@ -1526,7 +1526,7 @@ a(href="#toc") Back to top
   `,
   `,`,
   `
-  app/core/module-import-guard,
+  app/core/module-import-guard.ts,
   app/core/core.module.ts
   `)
 :marked
@@ -1821,7 +1821,7 @@ a(href="#toc") Back to top
 
 .s-why.s-why-last
   :marked
-    **Why?** Angular allows for an [alternative syntax](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax) `on-*`. If the event itself was prefixed with `on` this would result in an `on-onEvent` binding expression.
+    **Why?** Angular allows for an [alternative syntax](template-syntax.html#!#binding-syntax) `on-*`. If the event itself was prefixed with `on` this would result in an `on-onEvent` binding expression.
 
 +makeExample('style-guide/ts/05-16/app/heroes/hero.component.avoid.ts', 'example', 'app/heroes/hero.component.ts')(avoid=1)
 :marked
diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade
index 9956bcf654..d6ed35a8ce 100644
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/public/docs/ts/latest/guide/template-syntax.jade
@@ -401,7 +401,7 @@ table
   (element | component | directive) event, or (rarely) an attribute name.
   The following table summarizes:
 
-// If you update this table, UPDATE it in Dart & JS, too.
+//- If you update this table, UPDATE it in Dart & JS, too.
 <div width="90%">
 table
   tr
@@ -490,8 +490,8 @@ table
     If we must read a target element property or call one of its methods,
     we'll need a different technique.
     See the API reference for
-    [viewChild](../api/core/index/ViewChild-decorator.html) and
-    [contentChild](../api/core/index/ContentChild-decorator.html).
+    [ViewChild](../api/core/index/ViewChild-decorator.html) and
+    [ContentChild](../api/core/index/ContentChild-decorator.html).
 
 :marked
   ### Binding target
@@ -581,7 +581,7 @@ a(id="one-time-initialization")
 
 
 :marked
-  #### Content Security
+  #### Content security
   Imagine the following *malicious content*.
 +makeExample('template-syntax/ts/app/app.component.ts', 'evil-title')(format=".")    
 :marked
@@ -599,10 +599,10 @@ figure.image-display
 .l-main-section
 :marked
   <a id="other-bindings"></a>
-  ## Attribute, Class, and Style Bindings
+  ## Attribute, class, and style bindings
   The template syntax provides specialized one-way bindings for scenarios less well suited to property binding.
 
-  ### Attribute Binding
+  ### Attribute binding
   We can set the value of an attribute directly with an **attribute binding**.
 .l-sub-section
   :marked
@@ -652,7 +652,7 @@ code-example(format="nocode").
   is to set ARIA attributes, as in this example:
 +makeExample('template-syntax/ts/app/app.component.html', 'attrib-binding-aria')(format=".")
 :marked
-  ### Class Binding
+  ### Class binding
 
   We can add and remove CSS class names from an element’s `class` attribute with
   a **class binding**.
@@ -668,9 +668,6 @@ code-example(format="nocode").
   We can replace that with a binding to a string of the desired class names; this is an all-or-nothing, replacement binding.
 +makeExample('template-syntax/ts/app/app.component.html', 'class-binding-2')(format=".")
 
-block dart-class-binding-bug
-  //- N/A
-
 :marked
   Finally, we can bind to a specific class name.
   Angular adds the class when the template expression evaluates to #{_truthy}.
@@ -683,7 +680,7 @@ block dart-class-binding-bug
     we generally prefer the [NgClass directive](#ngClass) for managing multiple class names at the same time.
 
 :marked
-  ### Style Binding
+  ### Style binding
 
   We can set inline styles with a **style binding**.
 
@@ -747,7 +744,7 @@ block style-property-name-dart-diff
     on [aliasing input/output properties](#aliasing-io).
 
 :marked
-  If the name fails to match element event or output property of a known directive,
+  If the name fails to match an element event or an output property of a known directive,
   Angular reports an “unknown directive” error.
 
   ### *$event* and event handling statements
@@ -778,7 +775,7 @@ block style-property-name-dart-diff
 
   <a id="eventemitter"></a>
   <a id="custom-event"></a>
-  ### Custom Events with EventEmitter
+  ### Custom events with *EventEmitter*
 
   Directives typically raise custom events with an Angular [EventEmitter](../api/core/index/EventEmitter-class.html).
   The directive creates an `EventEmitter` and exposes it as a property.
@@ -816,7 +813,7 @@ block style-property-name-dart-diff
   including queries and saves to a remote server.
   These changes percolate through the system and are ultimately displayed in this and other views.
 
-//
+//-
   :marked
     ### Event bubbling and propagation [TODO: reinstate this section when it becomes true]
     Angular invokes the event-handling statement if the event is raised by the current element or one of its child elements.
@@ -853,36 +850,44 @@ block style-property-name-dart-diff
 
   Angular offers a special _two-way data binding_ syntax for this purpose, **`[(x)]`**.
   The `[(x)]` syntax combines the brackets 
-  of _Property Binding_, `[x]`, with the parentheses of _Event Binding_, `(x)`.
+  of _property binding_, `[x]`, with the parentheses of _event binding_, `(x)`.
+
 .callout.is-important
   header [( )] = banana in a box
   :marked
     Visualize a *banana in a box* to remember that the parentheses go _inside_ the brackets.
+
 :marked
   The `[(x)]` syntax is easy to demonstrate when the element has a settable property called `x`
   and a corresponding event named `xChange`. 
   Here's a `SizerComponent` that fits the pattern.
   It has a `size` value property and a companion `sizeChange` event:
-+makeExample('template-syntax/ts/app/sizer.component.ts', null, 'app/sizer.component.ts')
+
++makeExample('app/sizer.component.ts')
+
 :marked
   The initial `size` is an input value from a property binding.
   Clicking the buttons increases or decreases the `size`, within min/max values constraints,
   and then raises (_emits_) the `sizeChange` event with the adjusted size.
 
-  Here's an example in which the `AppComponent.fontSize` is two-way bound to the `SizerComponent`:
-+makeExample('template-syntax/ts/app/app.component.html', 'two-way-1')(format=".")
+  Here's an example in which the `AppComponent.fontSizePx` is two-way bound to the `SizerComponent`:
+
++makeExcerpt('app/app.component.html', 'two-way-1', '')
+
 :marked
-  The `AppComponent.fontSize` establishes the initial `SizerComponent.size` value.
-  Clicking the buttons updates the `AppComponent.fontSize` via the two-way binding.
-  The revised `AppComponent.fontSize` value flows through to the _style_ binding, making the displayed text bigger or smaller.
-  Try it in the <live-example>live example</live-example>.
+  The `AppComponent.fontSizePx` establishes the initial `SizerComponent.size` value.
+  Clicking the buttons updates the `AppComponent.fontSizePx` via the two-way binding.
+  The revised `AppComponent.fontSizePx` value flows through to the _style_ binding, making the displayed text bigger or smaller.
+  Try it in the <live-example></live-example>.
 
   The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding.
   Angular _desugars_ the `SizerComponent` binding into this:
-+makeExample('template-syntax/ts/app/app.component.html', 'two-way-2')(format=".")
+
++makeExcerpt('app/app.component.html', 'two-way-2', '')
+
 :marked
   The `$event` variable contains the payload of the `SizerComponent.sizeChange` event.
-  Angular assigns the `$event` value to the `AppComponent.fontSize` when the user clicks the buttons.
+  Angular assigns the `$event` value to the `AppComponent.fontSizePx` when the user clicks the buttons.
 
   Clearly the two-way binding syntax is a great convenience compared to separate property and event bindings.
 
@@ -1418,7 +1423,7 @@ h3#aliasing-io Aliasing input/output properties
   Directive consumers expect to bind to the name of the directive.
   For example, when we apply a directive with a `myClick` selector to a `<div>` tag,
   we expect to bind to an event property that is also called `myClick`.
-+makeExample('template-syntax/ts/app/app.component.html', 'my-click')(format=".")
++makeExample('template-syntax/ts/app/app.component.html', 'myClick')(format=".")
 :marked
   However, the directive name is often a poor choice for the name of a property within the directive class.
   The directive name rarely describes what the property does.
@@ -1431,14 +1436,14 @@ h3#aliasing-io Aliasing input/output properties
 
   We can specify the alias for the property name by passing it into the input/output decorator like this:
 
-+makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-1')(format=".")
++makeExample('template-syntax/ts/app/click.directive.ts', 'output-myClick')(format=".")
 
 .l-sub-section
   :marked
     We can also alias property names in the `inputs` and `outputs` #{_array}s.
     We write a colon-delimited (`:`) string with
     the directive property name on the *left* and the public alias on the *right*:
-  +makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-2')(format=".")
+  +makeExample('template-syntax/ts/app/click.directive.ts', 'output-myClick2')(format=".")
 
 <a id="expression-operators"></a>
 .l-main-section
diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade
index 15bd5f9baf..bbef6ee025 100644
--- a/public/docs/ts/latest/guide/testing.jade
+++ b/public/docs/ts/latest/guide/testing.jade
@@ -470,7 +470,7 @@ a(href="#top").to-top Back to top
   `TestBed.createComponent` creates an instance of `BannerComponent` to test and returns a [fixture](#component-fixture).
 
   `TestBed.createComponent` closes the current `TestBed` instance to further configuration.
-  You cannot call any more `TestBed` configuration methods, not `configureTestModule` 
+  You cannot call any more `TestBed` configuration methods, not `configureTestingModule` 
   nor any of the `override...` methods. The `TestBed` throws an error if you try.
 
 .alert.is-important
@@ -874,7 +874,7 @@ a(href="#top").to-top Back to top
 
   ### _compileComponents_ closes configuration
   Calling `compileComponents` closes the current `TestBed` instance is further configuration.
-  You cannot call any more `TestBed` configuration methods, not `configureTestModule` 
+  You cannot call any more `TestBed` configuration methods, not `configureTestingModule` 
   nor any of the `override...` methods. The `TestBed` throws an error if you try.
 
 .alert.is-important
@@ -1114,7 +1114,7 @@ a(href="#top").to-top Back to top
 
 :marked
   The `inject` function closes the current `TestBed` instance to further configuration.
-  You cannot call any more `TestBed` configuration methods, not `configureTestModule`
+  You cannot call any more `TestBed` configuration methods, not `configureTestingModule`
   nor any of the `override...` methods. The `TestBed` throws an error if you try.
 
 .alert.is-important
diff --git a/public/docs/ts/latest/tutorial/_data.json b/public/docs/ts/latest/tutorial/_data.json
index ab92fcda11..52be9be40d 100644
--- a/public/docs/ts/latest/tutorial/_data.json
+++ b/public/docs/ts/latest/tutorial/_data.json
@@ -32,6 +32,7 @@
   },
   "toh-pt6": {
     "title": "HTTP",
+    "subtitle": "Getting and saving data",
     "intro": "We convert our service and components to use Angular's HTTP service",
     "nextable": true
   }
diff --git a/public/docs/ts/latest/tutorial/index.jade b/public/docs/ts/latest/tutorial/index.jade
index 77770baa20..dae359159d 100644
--- a/public/docs/ts/latest/tutorial/index.jade
+++ b/public/docs/ts/latest/tutorial/index.jade
@@ -2,9 +2,7 @@ block includes
   include ../_util-fns
 
 :marked
-  # Tour of Heroes: the vision
-
-  Our grand plan is to build an app to help a staffing agency manage its stable of heroes.
+  Our grand plan for this tutorial is to build an app to help a staffing agency manage its stable of heroes.
   Even heroes need to find work.
 
   Of course we'll only make a little progress in this tutorial. What we do build will
diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade
index 288b0ab189..ea319d0c57 100644
--- a/public/docs/ts/latest/tutorial/toh-pt1.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt1.jade
@@ -1,8 +1,6 @@
 include ../_util-fns
 
 :marked
-  # Once Upon a Time
-
   Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends.
 
   Run the <live-example></live-example> for this part.
diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade
index 3415530ca3..82941ed69b 100644
--- a/public/docs/ts/latest/tutorial/toh-pt2.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt2.jade
@@ -1,7 +1,6 @@
 include ../_util-fns
 
 :marked
-  # It Takes Many Heroes
   Our story needs more heroes.
   We’ll expand our Tour of Heroes app to display a list of heroes,
   allow the user to select a hero, and display the hero’s details.
diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade
index 3cc1e28bcf..a5a3f494ad 100644
--- a/public/docs/ts/latest/tutorial/toh-pt4.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt4.jade
@@ -1,7 +1,6 @@
 include ../_util-fns
 
 :marked
-  # Services
   The Tour of Heroes is evolving and we anticipate adding more components in the near future.
   
   Multiple components will need access to hero data and we don't want to copy and 
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index 79d643eaa9..584ec4b37b 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -9,8 +9,6 @@ block includes
   - var _redirectTo = 'redirectTo'
 
 :marked
-  # Routing Around the App
-
   We received new requirements for our Tour of Heroes application:
 
   * Add a *Dashboard* view.
@@ -205,7 +203,6 @@ block router-config-intro
 
 - var _are = _docsFor == 'dart' ? 'takes' : 'are'
 - var _routePathPrefix = _docsFor == 'dart' ? '/' : ''
-
 :marked
   The `!{_RoutesVsAtRouteConfig}` !{_are} !{_an} !{_array} of *route definitions*.
   We have only one route definition at the moment but rest assured, we'll add more.
@@ -362,11 +359,15 @@ block redirect-vs-use-as-default
 
   Replace the `template` metadata with a `templateUrl` property that points to a new
   template file.
-
-  Set the `moduleId` property to `module.id` for module-relative loading of the `templateUrl`.
++ifDocsFor('ts|js')
+  :marked
+    Set the `moduleId` property to `module.id` for module-relative loading of the `templateUrl`.
 
 +makeExcerpt('app/dashboard.component.ts', 'metadata')
 
+block templateUrl-path-resolution
+  //- N/A for TS
+
 :marked
   Create that file with this content:
 
@@ -404,7 +405,7 @@ block redirect-vs-use-as-default
   * Inject the `HeroService` in the constructor and hold it in a private `!{_priv}heroService` field.
   * Call the service to get heroes inside the Angular `ngOnInit` lifecycle hook.
 
-  In this dashboard we cherry-pick four heroes (2nd, 3rd, 4th, and 5th) with the `Array.slice` method.
+  In this dashboard we cherry-pick four heroes (2nd, 3rd, 4th, and 5th)<span if-docs="ts"> with the `Array.slice` method</span>.
 
   Refresh the browser and see four heroes in the new dashboard.
 
@@ -510,6 +511,11 @@ block route-params
 
 +makeExcerpt('app/hero-detail.component.ts (constructor)', 'ctor')
 
+:marked
+  We'll also import the `switchMap` operator to use later with the route parameters `Observable`.
+
++makeExcerpt('app/hero-detail.component.ts (switchMap import)', 'rxjs-import')
+
 :marked
   We tell the class that we want to implement the `OnInit` interface.
 
@@ -525,14 +531,26 @@ block ngOnInit
 
 block extract-id
   :marked
-    Notice how we extract the `id` by calling the `forEach` method
-    which will deliver our !{_array} of route parameters.
+    Note how the `switchMap` operator maps the id in the observable route parameters
+    to a new `Observable`, the result of the `HeroService.getHero` method.
+
+    If the user re-navigates to this component while a getHero request is still inflight,
+    switchMap cancels that old request before calling `HeroService.getHero` again.
 
 - var _str2int = _docsFor == 'dart' ? '<code>int.parse</code> static method' : 'JavaScript (+) operator'
 :marked
   The hero `id` is a number. Route parameters are *always strings*.
   So we convert the route parameter value to a number with the !{_str2int}.
 
+.l-sub-section
+  :marked
+    ### Do I need to unsubscribe?
+
+    The `Router` manages the [observables](../guide/router.html#activated-route) it provides and localizes
+    the subscriptions. The subscriptions are cleaned up when the component is destroyed, protecting against
+    memory leaks, so we don't need to _unsubscribe_ from the route params `Observable`.
+
+:marked
   ### Add *HeroService.getHero*
 
   The problem with this bit of code is that `HeroService` doesn't have a `getHero` method!
@@ -575,10 +593,10 @@ block extract-id
   incremental improvement and migrate the template to its own file,
   called <span ngio-ex>hero-detail.component.html</span>:
 
-+makeExample('app/hero-detail.component.html')(format='.')
++makeExample('app/hero-detail.component.html')
 
 :marked
-  We update the component metadata with a `moduleId` and a `templateUrl` pointing to the template file that we just created.
+  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.
 
 +makeExcerpt('app/hero-detail.component.ts', 'metadata')
 
@@ -600,11 +618,17 @@ block extract-id
 
 +makeExample('app/dashboard.component.html', 'click', 'app/dashboard.component.html (repeated <a> tag)')
 
++ifDocsFor('dart')
+  .alert.is-important
+    :marked
+      Router links in the dashboard are currently not operational, as reported in issue
+      [dart-lang/angular2/issues/186](https://github.com/dart-lang/angular2/issues/186).
+
 - var _pathVsName = _docsFor == 'dart' ? 'name' : 'path'
 :marked
   Notice the `[routerLink]` binding.
 
-  In the top level navigation in the [`AppComponent`
+  Top level navigation in the [`AppComponent`
   template](#router-links) has router links set to fixed !{_pathVsName}s of the
   destination routes, "/dashboard" and "/heroes".
 
@@ -622,53 +646,55 @@ block extract-id
 :marked
   Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
 
-.l-main-section
-:marked
-  ## Refactor routes to a _Routing Module_
++ifDocsFor('ts')
+  .l-main-section
+  :marked
+    ## Refactor routes to a _Routing Module_
 
-  Almost 20 lines of `AppModule` are devoted to configuring four routes. 
-  Most application have many more routes and they [add guard services](../guide/router.html#guards) 
-  to protect against unwanted or unauthorized navigations. 
-  Routing considerations could quickly dominate this module and obscure its primary purpose which is to 
-  establish key facts about the entire app for the Angular compiler.
+    Almost 20 lines of `AppModule` are devoted to configuring four routes. 
+    Most applications have many more routes and they [add guard services](../guide/router.html#guards) 
+    to protect against unwanted or unauthorized navigations. 
+    Routing considerations could quickly dominate this module and obscure its primary purpose which is to 
+    establish key facts about the entire app for the Angular compiler.
 
-  We should refactor the routing configuration into its own class.
-  What kind of class? 
-  The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders` which suggests that a
-  class dedicated to routing should be some kind of module.
-  It should be a [_Routing Module_](../guide/router.html#routing-module).
+    We should refactor the routing configuration into its own class.
+    What kind of class? 
+    The current `RouterModule.forRoot()` produces an Angular `ModuleWithProviders` which suggests that a
+    class dedicated to routing should be some kind of module.
+    It should be a [_Routing Module_](../guide/router.html#routing-module).
 
-  By convention the name of a _Routing Module_ contains the word "Routing" and 
-  aligns with the name of the module that declares the components navigated to".
-  
-  Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents extracted from the `AppModule` class:
+    By convention the name of a _Routing Module_ contains the word "Routing" and 
+    aligns with the name of the module that declares the components navigated to.
 
-+makeExample('app/app-routing.module.ts')
-:marked
-  Noteworthy points, typical of _Routing Modules_:
-  * Pull the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
+    Create an `app-routing.module.ts` file as a sibling to `app.module.ts`. Give it the following contents extracted from the `AppModule` class:
 
-  * Add `RouterModule.forRoot(routes)` to `imports`.
-    
-  * Add `RouterModule` to `exports` so that the components in the companion module have access to Router declarables 
-  such as `RouterLink` and `RouterOutlet`.
-  
-  * No `declarations`!  Declarations are the responsibility of the companion module.
+  +makeExample('app/app-routing.module.ts')
+  :marked
+    Noteworthy points, typical of _Routing Modules_:
+    * Pulls the routes into a variable. You might export it in future and it clarifies the _Routing Module_ pattern.
 
-  * Add module `providers` for guard services if you have them; there are none in this example.
+    * Adds `RouterModule.forRoot(routes)` to `imports`.
 
-  ### Update _AppModule_
+    * Adds `RouterModule` to `exports` so that the components in the companion module have access to Router declarables 
+    such as `RouterLink` and `RouterOutlet`.
 
-  Now delete the routing configuration from `AppModule` and import the `AppRoutingModule` 
-  (_both_ with an ES `import` statement _and_ by adding it to the `NgModule.imports` list).
+    * No `declarations`!  Declarations are the responsibility of the companion module.
+
+    * Adds module `providers` for guard services if you have them; there are none in this example.
+
+    ### Update _AppModule_
+
+    Now delete the routing configuration from `AppModule` and import the `AppRoutingModule` 
+    (_both_ with an ES `import` statement _and_ by adding it to the `NgModule.imports` list).
+
+    Here is the revised `AppModule`, compared to its pre-refactor state:
+  +makeTabs(
+    `toh-5/ts/app/app.module.ts, toh-5/ts/app/app.module.3.ts`,
+     null,
+    `app/app.module.ts (after), app/app.module.ts (before)`)
+  :marked
+    It's simpler and focused on indentifying the key pieces of the application.
 
-  Here is the revised `AppModule`, compared to its pre-refactor state:
-+makeTabs(
-  `toh-5/ts/app/app.module.ts, toh-5/ts/app/app.module.3.ts`,
-   null,
-  `app/app.module.ts (after), app/app.module.ts (before)`)
-:marked
-  It's simpler and focused on indentifying the key pieces of the application.
 .l-main-section
 :marked
   ## Select a Hero in the *HeroesComponent*
@@ -738,7 +764,7 @@ 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.
-  1. *Set* the `moduleId` property to `module.id` so that `templateUrl` and `styleUrls` are relative to the component.
+  <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
@@ -764,11 +790,12 @@ block heroes-component-cleanup
   1. Implement `gotoDetail` by calling the `router.navigate` method
 
 +makeExcerpt('app/heroes.component.ts', 'gotoDetail')
+
 :marked
   Note that we're passing a two-element **link parameters !{_array}**
   &mdash; a path and the route parameter &mdash; to
   the `router.navigate` method just as we did in the `[routerLink]` binding
-  back in the `DashboardComponent`
+  back in the `DashboardComponent`.
   Here's the fully revised `HeroesComponent` class:
 
 +makeExcerpt('app/heroes.component.ts', 'class')
@@ -934,7 +961,7 @@ block file-tree-end
   - We shared the `HeroService` among multiple components.
   - We moved HTML and CSS out of the component file and into their own files.
   - We added the `uppercase` pipe to format data.
-  - We refactored routes into a `Routing Module` that we import.
+  <li if-docs="ts"> We refactored routes into a `Routing Module` that we import.</li>
 
   ### The Road Ahead
 
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index c662d3c9b0..b6bbf982a7 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -12,8 +12,6 @@ block includes
 - var _promise = _Promise.toLowerCase()
 
 :marked
-  # Getting and Saving Data
-
   Our stakeholders appreciate our progress.
   Now they want to get the hero data from a server, let users add, edit, and delete heroes,
   and save these changes back to the server.
diff --git a/public/events.jade b/public/events.jade
index 261248c3cd..45d7ca7dcd 100644
--- a/public/events.jade
+++ b/public/events.jade
@@ -7,17 +7,6 @@ table.is-full-width
 
   tbody
 
-    <!-- Devoxx Belgium -->
-    tr
-      th
-        a(
-        target="_blank"
-        href="https://www.devoxx.be/"
-        ) Devoxx Belgium
-      td Antwerp, Belgium
-      td Nov. 7-11, 2016
-
-
     <!-- DEVIntersection -->
     tr
       th
diff --git a/public/news.jade b/public/news.jade
index 7e51afcd49..335a0c9a47 100644
--- a/public/news.jade
+++ b/public/news.jade
@@ -4,6 +4,19 @@
   .clear
 
 .grid-fluid
+  .c6
+    .article-card
+      .date Nov 2, 2016
+      .title
+        a(
+        target="_blank"
+        href="http://angularjs.blogspot.ca/2016/11/easy-angular-authentication-with-json.html"
+        ) Easy Angular Authentication with JSON Web Tokens
+      p Stateless authentication is a great fit for Angular apps. In this post, guest-blogger Ryan Chenkie from Auth0 talks about implementing it using JSON Web Tokens....
+      .author
+        img(src="/resources/images/bios/shield-bio-placeholder.png")
+        .posted Posted by <b>Ryan Chenkie</b>
+
   .c6
     .article-card
       .date Oct 12, 2016
@@ -17,18 +30,6 @@
         img(src="/resources/images/bios/stephenfluin.jpg")
         .posted Posted by <b>Stephen Fluin</b>
 
-  .c6
-    .article-card
-      .date Oct 7, 2016
-      .title
-        a(
-        target="_blank"
-        href="http://angularjs.blogspot.com/2016/10/versioning-and-releasing-angular.html"
-        ) Versioning and Releasing Angular
-      p In order for the ecosystem around Angular to thrive, developers need stability from the Angular framework so that reusable components and libraries, tools and learned practices don’t go obsolete unexpectedly...
-      .author
-        img(src="/resources/images/bios/igor-minar.jpg")
-        .posted Posted by <b>Igor Minar</b>
 
 .grid-fluid.l-space-bottom-2.l-space-top-4
   .c12.text-center
@@ -64,6 +65,18 @@
 
 
 .grid-fluid
+  .c6
+    .article-card
+      .date Oct 13, 2016
+      .title
+        a(
+        target="_blank"
+        href="http://www.upway2late.com/#/blogs/angular2-cli-and-dot-net-core"
+        ) Using the Angular 2 CLI with .NET Core 1.0 and Visual Studio 2015
+      p This web site was most recently written in Angular 2, when Angular 2 was still in beta. I have rewritten it now that Angular 2 is RTM, using Angular CLI Beta 15. The site now also uses .NET Core...
+      .author
+        img(src="/resources/images/bios/shield-bio-placeholder.png")
+        .posted Posted by <b>James Katic</b>
   .c6
     .article-card
       .date Oct 10, 2016
@@ -77,19 +90,6 @@
         img(src="/resources/images/bios/shield-bio-placeholder.png")
         .posted Posted by <b>Daniel Zen</b>
 
-  .c6
-    .article-card
-      .date Sept 30, 2016
-      .title
-        a(
-        target="_blank"
-        href="http://www.simb.co/angular-cli-using-docker/?platform=hootsuite"
-        ) Using Angular CLI to create Angular 2 applications in Docker
-      p Angular CLI is a great tool for developing  Angular 2 applications. I thought it would be fun to do a quick demo...
-      .author
-        img(src="/resources/images/bios/shield-bio-placeholder.png")
-        .posted Posted by <b>Simeon Bateman</b>
-
 
 .grid-fluid.l-space-bottom-2.l-space-top-4
   .c12.text-center
diff --git a/public/resources/js/util.js b/public/resources/js/util.js
index 87ddeed291..91cf6e5a01 100644
--- a/public/resources/js/util.js
+++ b/public/resources/js/util.js
@@ -77,7 +77,7 @@ var NgIoUtil = (function () {
             // TODO: use $location.path() instead(?). It seems to be empty.
             var loc = $location.absUrl();
             // E.g., https://example.com/docs/dart/latest/guide/displaying-data.html
-            var matches = loc.match(/.*\/([\w\.\-]+)\.html/);
+            var matches = loc.match(/.*\/([\w\-]+)(\.html)?$/);
             if (matches) NgIoUtil.setExampleName(matches[1]); // cache name
         }
         return NgIoUtil._exampleName;
diff --git a/scripts/config/bad-code-excerpt-skip-patterns.txt b/scripts/config/bad-code-excerpt-skip-patterns.txt
index 1331f28b30..d26367789e 100644
--- a/scripts/config/bad-code-excerpt-skip-patterns.txt
+++ b/scripts/config/bad-code-excerpt-skip-patterns.txt
@@ -2,4 +2,3 @@
 # <grep-pattern-to-match-file-path> # reason / issue number
 
 /[jt]s/.*/api/forms/index/NG_VALIDATORS-let.html    # RC6 contains broken example tags
-/dart/latest/tutorial/toh-pt5.html
diff --git a/tools/api-builder/angular.io-package/index.js b/tools/api-builder/angular.io-package/index.js
index 57ddba5640..c08f9f5d35 100644
--- a/tools/api-builder/angular.io-package/index.js
+++ b/tools/api-builder/angular.io-package/index.js
@@ -66,6 +66,7 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
     '@angular/router/index.ts',
     '@angular/router/testing/index.ts',
     '@angular/upgrade/index.ts',
+    '@angular/upgrade/static.ts'
   ];
   readTypeScriptModules.hidePrivateMembers = true;
 
diff --git a/tools/doc-shredder/doc-shredder.js b/tools/doc-shredder/doc-shredder.js
index 7cb4586d23..a4f124221c 100644
--- a/tools/doc-shredder/doc-shredder.js
+++ b/tools/doc-shredder/doc-shredder.js
@@ -120,7 +120,7 @@ function createShredExamplePackage(shredOptions) {
       readFilesProcessor.basePath = "/";
 
       // Specify collections of source files that should contain the documentation to extract
-      var extns = ['*.ts', '*.html', '*.js', '*.css', '*.json', '*.dart', '*.yaml' ];
+      var extns = ['*.ts', '*.html', '*.js', '*.css', '*.json', '*.dart', '*.yaml', '*.es6' ];
       var includeFiles = extns.map(function(extn) {
         if (options.includeSubdirs) {
           return path.join(options.examplesDir, '**', extn);
diff --git a/tools/doc-shredder/regionExtractor.js b/tools/doc-shredder/regionExtractor.js
index 870c3620a0..eca191d54e 100644
--- a/tools/doc-shredder/regionExtractor.js
+++ b/tools/doc-shredder/regionExtractor.js
@@ -154,6 +154,7 @@ function getCommentInfo(extension) {
   switch (extension) {
     case 'ts':
     case 'js':
+    case 'es6':
     case 'dart':
       commentInfo = {
         prefix: '//',
diff --git a/tools/plunker-builder/builder.js b/tools/plunker-builder/builder.js
index edce64b81a..a651c51c40 100644
--- a/tools/plunker-builder/builder.js
+++ b/tools/plunker-builder/builder.js
@@ -72,7 +72,7 @@ class PlunkerBuilder {
       var config = this._initConfigAndCollectFileNames(configFileName);
       var postData = this._createPostData(config);
       this._addPlunkerFiles(config, postData);
-      var html = this._createPlunkerHtml(postData);
+      var html = this._createPlunkerHtml(config, postData);
       if (this.options.writeNoLink) {
         fs.writeFileSync(outputFileName, html, 'utf-8');
       }
@@ -95,13 +95,19 @@ class PlunkerBuilder {
     }
   }
 
-  _createBasePlunkerHtml(embedded) {
-    var html = '<!DOCTYPE html><html lang="en"><body>'
-    html += `<form id="mainForm" method="post" action="${this.options.url}" target="_self">`
+  _createBasePlunkerHtml(config, embedded) {
+    var open = '';
+
+    if (config.open) {
+      open = embedded ? `&show=${config.open}` : `&open=${config.open}`;
+    }
+    var action = `${this.options.url}${open}`;
+    var html = '<!DOCTYPE html><html lang="en"><body>';
+    html += `<form id="mainForm" method="post" action="${action}" target="_self">`;
 
     // html += '<div class="button"><button id="formButton" type="submit">Create Plunker</button></div>'
     // html += '</form><script>document.getElementById("formButton").click();</script>'
-    html +=  '</form><script>document.getElementById("mainForm").submit();</script>'
+    html +=  '</form><script>document.getElementById("mainForm").submit();</script>';
     html += '</body></html>';
     return html;
   }
@@ -166,8 +172,8 @@ class PlunkerBuilder {
     return postData;
   }
 
-  _createPlunkerHtml(postData) {
-    var baseHtml = this._createBasePlunkerHtml(this.options.embedded);
+  _createPlunkerHtml(config, postData) {
+    var baseHtml = this._createBasePlunkerHtml(config, this.options.embedded);
     var doc = jsdom.jsdom(baseHtml);
     var form = doc.querySelector('form');
     _.forEach(postData, (value, key) => {
diff --git a/tools/plunker-builder/indexHtmlTranslator.js b/tools/plunker-builder/indexHtmlTranslator.js
index 7f394e09a8..6241bc436f 100644
--- a/tools/plunker-builder/indexHtmlTranslator.js
+++ b/tools/plunker-builder/indexHtmlTranslator.js
@@ -28,7 +28,7 @@ var _rxRules = {
   //   System.import('app').catch(function(err){ console.error(err); });
   // </script>
   system_strip_import_app: {
-   from: /<script>[^]?\s*System.import\('app[^]*\/script>/,
+   from: /<script>[^]?\s*System.import\('app'\)[^]*\/script>/,
    to:   ''
   },
   system_extra_main: {