diff --git a/README.md b/README.md
index 2ee11b04d9..5e1c55b7bd 100644
--- a/README.md
+++ b/README.md
@@ -98,9 +98,14 @@ Also, open any `plunkr.no-link.html` to see the code execute in plunker
 
 ### Sample end-to-end tests
 
-All samples should be covered to some degree by end-to-end tests.
+All samples should be covered to some degree by end-to-end tests:
+- `gulp run-e2e-tests` to run all TypeScript and JavaScript tests
+- `gulp run-e2e-tests --lang=dart` to run all Dart tests
+- `gulp run-e2e-tests --lang=all` to run TypeScript, JavaScript, and Dart tests
+- `gulp run-e2e-tests --filter=quickstart` to filter the examples to run, by name
+- `gulp run-e2e-tests --fast` to ignore npm install, webdriver update and boilerplate copy
 
-Run them yourself: `gulp run-e2e-tests`.
+Any combination of options is possible.
 
 
 ## Technology Used
diff --git a/public/docs/_examples/cb-dependency-injection/e2e-spec.js b/public/docs/_examples/cb-dependency-injection/e2e-spec.js
index aeb0e68b17..14f1f0994b 100644
--- a/public/docs/_examples/cb-dependency-injection/e2e-spec.js
+++ b/public/docs/_examples/cb-dependency-injection/e2e-spec.js
@@ -34,11 +34,16 @@ describe('Dependency Injection Cookbook', function () {
       expect(sortedHero).toBeDefined();
     });
     
-    it('should render Hero of the Month', function () {    
+    it('should render Hero of the Month when DI deps are defined using provide()', function () {    
       var heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month"]')).get(0);
       expect(heroOfTheMonth).toBeDefined();
     });
     
+    it('should render Hero of the Month when DI deps are defined using provide object literal', function () {    
+      var heroOfTheMonth = element.all(by.xpath('//h3[text()="Hero of the month 2"]')).get(0);
+      expect(heroOfTheMonth).toBeDefined();
+    });
+    
     it('should render Hero Bios', function () {    
       var heroBios = element.all(by.xpath('//h3[text()="Hero Bios"]')).get(0);
       expect(heroBios).toBeDefined();
@@ -54,8 +59,13 @@ describe('Dependency Injection Cookbook', function () {
       expect(magmaPhone).toBeDefined();
     });
     
-    it('should render Hero-of-the-Month runner-ups', function () {    
-      var runnersUp =  element(by.id('rups')).getText();
+    it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide()', function () {    
+      var runnersUp =  element(by.id('rups1')).getText();
+      expect(runnersUp).toContain('RubberMan, Mr. Nice');
+    });
+    
+    it('should render Hero-of-the-Month runner-ups when DI deps are defined using provide object literal', function () {    
+      var runnersUp =  element(by.id('rups2')).getText();
       expect(runnersUp).toContain('RubberMan, Mr. Nice');
     });
     
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.html b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.html
index c27281f2af..0e1d15932d 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.html
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.html
@@ -23,6 +23,9 @@
   <hero-of-the-month></hero-of-the-month>
 </div>
 
+<div class="di-component">
+  <hero-of-the-month-lit></hero-of-the-month-lit>
+</div>
 
 <div class="di-component">
   <h3>Unsorted Heroes</h3>
@@ -36,4 +39,4 @@
 
 <div class="di-component">
   <parent-finder></parent-finder>
-</div>
\ No newline at end of file
+</div>
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts
index f8194783d3..7188e4f63f 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/app.component.ts
@@ -9,10 +9,13 @@ import { HeroesBaseComponent,
 import { HighlightDirective }          from './highlight.directive';
 import { ParentFinderComponent }       from './parent-finder.component';
 
+// Object Literal syntax
+import { HeroOfTheMonthLiteralsComponent } from './hero-of-the-month-literals.component';
+
 const DIRECTIVES = [
     HeroBiosComponent, HeroBiosAndContactsComponent,
     HeroesBaseComponent, SortedHeroesComponent,
-    HeroOfTheMonthComponent,
+    HeroOfTheMonthComponent, HeroOfTheMonthLiteralsComponent,
     HighlightDirective,
     ParentFinderComponent
 ];
@@ -24,7 +27,7 @@ import { UserService }        from './user.service';
 
 @Component({
   selector: 'my-app',
-  templateUrl:'app/app.component.html',
+  templateUrl: 'app/app.component.html',
   directives: DIRECTIVES,
 // #docregion providers
   providers: [LoggerService, UserContextService, UserService]
@@ -33,10 +36,10 @@ import { UserService }        from './user.service';
 export class AppComponent {
 // #enddocregion import-services
 
-  private userId:number = 1;
+  private userId: number = 1;
 
   // #docregion ctor
-  constructor(logger:LoggerService, public userContext:UserContextService) {
+  constructor(logger: LoggerService, public userContext: UserContextService) {
     userContext.loadUser(this.userId);
     logger.logInfo('AppComponent initialized');
   }
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month-literals.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month-literals.component.ts
new file mode 100644
index 0000000000..13c6c0ab9d
--- /dev/null
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month-literals.component.ts
@@ -0,0 +1,67 @@
+/* tslint:disable:one-line:check-open-brace*/
+// #docplaster
+// #docregion opaque-token
+import { OpaqueToken } from '@angular/core';
+
+export const TITLE = new OpaqueToken('title');
+// #enddocregion opaque-token
+
+// #docregion hero-of-the-month
+import { Component, Inject } from '@angular/core';
+
+import { DateLoggerService,
+         MinimalLogger }     from './date-logger.service';
+import { Hero }              from './hero';
+import { HeroService }       from './hero.service';
+import { LoggerService }     from './logger.service';
+import { RUNNERS_UP,
+         runnersUpFactory }  from './runners-up';
+
+// #enddocregion hero-of-the-month
+// #docregion some-hero
+const someHero = new Hero(42, 'Magma', 'Had a great month!', '555-555-5555');
+// #enddocregion some-hero
+
+const template = `
+  <h3>{{title}}</h3>
+  <div>Winner: <strong>{{heroOfTheMonth.name}}</strong></div>
+  <div>Reason for award: <strong>{{heroOfTheMonth.description}}</strong></div>
+  <div>Runners-up: <strong id="rups2">{{runnersUp}}</strong></div>
+
+  <p>Logs:</p>
+  <div id="logs">
+    <div *ngFor="let log of logs">{{log}}</div>
+  </div>
+  `;
+
+// #docregion hero-of-the-month
+@Component({
+  selector: 'hero-of-the-month-lit',
+  template: template,
+  // #docregion providers-using-object-literals
+  providers: [
+    {provide: Hero,          useValue:    someHero},
+    {provide: TITLE,         useValue:    'Hero of the Month - Object Literals'},
+    {provide: HeroService,   useClass:    HeroService},
+    {provide: LoggerService, useClass:    DateLoggerService},
+    {provide: MinimalLogger, useExisting: LoggerService},
+    {provide: RUNNERS_UP,    useFactory:  runnersUpFactory(2), deps: [Hero, HeroService]}
+  ]
+  // #enddocregion providers-using-object-literals
+})
+export class HeroOfTheMonthLiteralsComponent {
+  logs: string[] = [];
+
+// #docregion ctor-signature
+  constructor(
+      logger: MinimalLogger,
+      public heroOfTheMonth: Hero,
+      @Inject(RUNNERS_UP) public runnersUp: string,
+      @Inject(TITLE) public title: string)
+// #enddocregion ctor-signature
+  {
+    this.logs = logger.logs;
+    logger.logInfo('starting up');
+  }
+}
+// #enddocregion hero-of-the-month
diff --git a/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts
index 6b9646d3e9..4183734753 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts
+++ b/public/docs/_examples/cb-dependency-injection/ts/app/hero-of-the-month.component.ts
@@ -26,7 +26,7 @@ const template = `
   <h3>{{title}}</h3>
   <div>Winner: <strong>{{heroOfTheMonth.name}}</strong></div>
   <div>Reason for award: <strong>{{heroOfTheMonth.description}}</strong></div>
-  <div>Runners-up: <strong id="rups">{{runnersUp}}</strong></div>
+  <div>Runners-up: <strong id="rups1">{{runnersUp}}</strong></div>
 
   <p>Logs:</p>
   <div id="logs">
diff --git a/public/docs/_examples/dependency-injection/e2e-spec.js b/public/docs/_examples/dependency-injection/e2e-spec.js
index 819b8b0008..effdc1111f 100644
--- a/public/docs/_examples/dependency-injection/e2e-spec.js
+++ b/public/docs/_examples/dependency-injection/e2e-spec.js
@@ -88,6 +88,11 @@ describe('Dependency Injection Tests', function () {
       expectedMsg = 'Hello from logger provided with useClass';
       expect(element(by.css('#p3')).getText()).toEqual(expectedMsg);
     });
+    
+    it('P3a (provide) displays as expected', function () {
+      expectedMsg = 'Hello from logger provided with {provide: Logger, useClass: Logger}';
+      expect(element(by.css('#p3a')).getText()).toEqual(expectedMsg);
+    });
 
     it('P4 (useClass:BetterLogger) displays as expected', function () {
       expectedMsg = 'Hello from logger provided with useClass:BetterLogger';
diff --git a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts
index e0426ae9d0..cd718c4c04 100644
--- a/public/docs/_examples/dependency-injection/ts/app/providers.component.ts
+++ b/public/docs/_examples/dependency-injection/ts/app/providers.component.ts
@@ -1,6 +1,7 @@
+/* tslint:disable:one-line:check-open-brace*/
 // Examples of provider arrays
-//#docplaster
-import { Component, Host, Inject, Injectable,
+// #docplaster
+import { Component, Inject, Injectable,
          provide, Provider }    from '@angular/core';
 
 import { APP_CONFIG,
@@ -9,7 +10,7 @@ import { APP_CONFIG,
 import { HeroService }          from './heroes/hero.service';
 import { heroServiceProvider }  from './heroes/hero.service.provider';
 import { Logger }               from './logger.service';
-import { User, UserService }    from './user.service';
+import { UserService }    from './user.service';
 
 let template = '{{log}}';
 
@@ -18,12 +19,12 @@ let template = '{{log}}';
   selector: 'provider-1',
   template: template,
   providers:
-    //#docregion providers-1
+    // #docregion providers-1
     [Logger]
-    //#enddocregion providers-1
+    // #enddocregion providers-1
 })
 export class ProviderComponent1 {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from logger provided with Logger class');
     this.log = logger.logs[0];
@@ -35,12 +36,12 @@ export class ProviderComponent1 {
   selector: 'provider-2',
   template: template,
   providers:
-    //#docregion providers-2
+    // #docregion providers-2
     [new Provider(Logger, {useClass: Logger})]
-    //#enddocregion providers-2
+    // #enddocregion providers-2
 })
 export class ProviderComponent2 {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from logger provided with Provider class and useClass');
     this.log = logger.logs[0];
@@ -52,18 +53,35 @@ export class ProviderComponent2 {
   selector: 'provider-3',
   template: template,
   providers:
-    //#docregion providers-3
+    // #docregion providers-3
     [provide(Logger, {useClass: Logger})]
-    //#enddocregion providers-3
+    // #enddocregion providers-3
 })
 export class ProviderComponent3 {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from logger provided with useClass');
     this.log = logger.logs[0];
   }
 }
 
+//////////////////////////////////////////
+@Component({
+  selector: 'provider-3a',
+  template: template,
+  providers:
+    // #docregion providers-3a
+    [{provide: Logger, useClass: Logger}]
+    // #enddocregion providers-3a
+})
+export class ProviderComponent3a {
+  log: string;
+  constructor(logger: Logger) {
+    logger.log('Hello from logger provided with {provide: Logger, useClass: Logger}');
+    this.log = logger.logs[0];
+  }
+}
+
 //////////////////////////////////////////
 class BetterLogger extends Logger {}
 
@@ -71,12 +89,12 @@ class BetterLogger extends Logger {}
   selector: 'provider-4',
   template: template,
   providers:
-    //#docregion providers-4
+    // #docregion providers-4
     [provide(Logger, {useClass: BetterLogger})]
-    //#enddocregion providers-4
+    // #enddocregion providers-4
 })
 export class ProviderComponent4 {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from logger provided with useClass:BetterLogger');
     this.log = logger.logs[0];
@@ -87,11 +105,11 @@ export class ProviderComponent4 {
 // #docregion EvenBetterLogger
 @Injectable()
 class EvenBetterLogger {
-  logs:string[] = [];
+  logs: string[] = [];
 
   constructor(private userService: UserService) { }
 
-  log(message:string){
+  log(message: string){
     message = `Message to ${this.userService.user.name}: ${message}.`;
     console.log(message);
     this.logs.push(message);
@@ -103,13 +121,13 @@ class EvenBetterLogger {
   selector: 'provider-5',
   template: template,
   providers:
-    //#docregion providers-5
+    // #docregion providers-5
     [ UserService,
       provide(Logger, {useClass: EvenBetterLogger}) ]
-    //#enddocregion providers-5
+    // #enddocregion providers-5
 })
 export class ProviderComponent5 {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from EvenBetterlogger');
     this.log = logger.logs[0];
@@ -119,9 +137,9 @@ export class ProviderComponent5 {
 //////////////////////////////////////////
 class NewLogger extends Logger {}
 class OldLogger {
-  logs:string[] = [];
-  log(message:string) {
-    throw new Error('Should not call the old logger!')
+  logs: string[] = [];
+  log(message: string) {
+    throw new Error('Should not call the old logger!');
   };
 }
 
@@ -129,15 +147,15 @@ class OldLogger {
   selector: 'provider-6a',
   template: template,
   providers:
-    //#docregion providers-6a
+    // #docregion providers-6a
     [ NewLogger,
       // Not aliased! Creates two instances of `NewLogger`
-      provide(OldLogger, {useClass:NewLogger}) ]
-    //#enddocregion providers-6a
+      provide(OldLogger, {useClass: NewLogger}) ]
+    // #enddocregion providers-6a
 })
 export class ProviderComponent6a {
-  log:string;
-  constructor(newLogger:NewLogger, oldLogger: OldLogger) {
+  log: string;
+  constructor(newLogger: NewLogger, oldLogger: OldLogger) {
     if (newLogger === oldLogger){
       throw new Error('expected the two loggers to be different instances');
     }
@@ -152,15 +170,15 @@ export class ProviderComponent6a {
   selector: 'provider-6b',
   template: template,
   providers:
-    //#docregion providers-6b
+    // #docregion providers-6b
     [ NewLogger,
       // Alias OldLogger w/ reference to NewLogger
       provide(OldLogger, {useExisting: NewLogger}) ]
-    //#enddocregion providers-6b
+    // #enddocregion providers-6b
 })
 export class ProviderComponent6b {
-  log:string;
-  constructor(newLogger:NewLogger, oldLogger: OldLogger) {
+  log: string;
+  constructor(newLogger: NewLogger, oldLogger: OldLogger) {
     if (newLogger !== oldLogger){
       throw new Error('expected the two loggers to be the same instance');
     }
@@ -175,19 +193,19 @@ export class ProviderComponent6b {
 let silentLogger = {
   logs: ['Silent logger says "Shhhhh!". Provided via "useValue"'],
   log: () => {}
-}
+};
 // #enddocregion silent-logger
 
 @Component({
   selector: 'provider-7',
   template: template,
   providers:
-    //#docregion providers-7
+    // #docregion providers-7
     [provide(Logger, {useValue: silentLogger})]
-    //#enddocregion providers-7
+    // #enddocregion providers-7
 })
 export class ProviderComponent7 {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from logger provided with useValue');
     this.log = logger.logs[0];
@@ -198,7 +216,7 @@ export class ProviderComponent7 {
 @Component({
   selector: 'provider-8',
   template: template,
-  providers:[heroServiceProvider, Logger, UserService]
+  providers: [heroServiceProvider, Logger, UserService]
 })
 export class ProviderComponent8{
   // #docregion provider-8-ctor
@@ -206,7 +224,7 @@ export class ProviderComponent8{
   // #enddocregion provider-8-ctor
 
   // must be true else this component would have blown up at runtime
-  log = 'Hero service injected successfully'
+  log = 'Hero service injected successfully';
 }
 
 /////////////////
@@ -248,7 +266,7 @@ export class ProviderComponent9a {
   selector: 'provider-9b',
   template: template,
   // #docregion providers-9b
-  providers:[provide(APP_CONFIG, {useValue: CONFIG})]
+  providers: [provide(APP_CONFIG, {useValue: CONFIG})]
   // #enddocregion providers-9b
 })
 export class ProviderComponent9b {
@@ -266,12 +284,12 @@ export class ProviderComponent9b {
 @Component({
   selector: 'provider-10a',
   template: template,
-  //#docregion providers-logger
+  // #docregion providers-logger
   providers: [Logger]
-  //#enddocregion providers-logger
+  // #enddocregion providers-logger
 })
 export class ProviderComponent10a {
-  log:string;
+  log: string;
   constructor(logger: Logger) {
     logger.log('Hello from the required logger.');
     this.log = logger.logs[0];
@@ -289,8 +307,8 @@ import {Optional} from '@angular/core';
 })
 export class ProviderComponent10b {
   // #docregion provider-10-ctor
-  log:string;
-  constructor(@Optional() private logger:Logger) {  }
+  log: string;
+  constructor(@Optional() private logger: Logger) {  }
   // #enddocregion provider-10-ctor
 
   ngOnInit() {
@@ -298,16 +316,16 @@ export class ProviderComponent10b {
     // No logger? Make one!
     if (!this.logger) {
       this.logger = {
-        log: (msg:string)=> this.logger.logs.push(msg),
+        log: (msg: string) => this.logger.logs.push(msg),
         logs: []
-      }
+      };
     // #enddocregion provider-10-logger
-      this.logger.log("Optional logger was not available.")
+      this.logger.log('Optional logger was not available.');
     // #docregion provider-10-logger
     }
     // #enddocregion provider-10-logger
     else {
-      this.logger.log('Hello from the injected logger.')
+      this.logger.log('Hello from the injected logger.');
       this.log = this.logger.logs[0];
     }
     this.log = this.logger.logs[0];
@@ -322,6 +340,7 @@ export class ProviderComponent10b {
   <div id="p1"><provider-1></provider-1></div>
   <div id="p2"><provider-2></provider-2></div>
   <div id="p3"><provider-3></provider-3></div>
+  <div id="p3a"><provider-3a></provider-3a></div>
   <div id="p4"><provider-4></provider-4></div>
   <div id="p5"><provider-5></provider-5></div>
   <div id="p6a"><provider-6a></provider-6a></div>
@@ -333,10 +352,11 @@ export class ProviderComponent10b {
   <div id="p10a"><provider-10a></provider-10a></div>
   <div id="p10b"><provider-10b></provider-10b></div>
   `,
-  directives:[
+  directives: [
     ProviderComponent1,
     ProviderComponent2,
     ProviderComponent3,
+    ProviderComponent3a,
     ProviderComponent4,
     ProviderComponent5,
     ProviderComponent6a,
diff --git a/public/docs/_examples/karma-test-shim.js b/public/docs/_examples/karma-test-shim.js
index bc8cf372f3..ec50e1ff66 100644
--- a/public/docs/_examples/karma-test-shim.js
+++ b/public/docs/_examples/karma-test-shim.js
@@ -22,72 +22,33 @@ var allSpecFiles = Object.keys(window.__karma__.files)
   .filter(isSpecFile)
   .filter(isBuiltFile);
 
-//////////////////////////
-// Load our SystemJS configuration.
-
-// map tells the System loader where to look for things
-var map = {
-  'app':                        'app',
-
-  '@angular':                   'node_modules/@angular',
-  'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
-  'rxjs':                       'node_modules/rxjs'
-};
-
-// packages tells the System loader how to load when no filename and/or no extension
-var packages = {
-  'app':                        { main: 'main.js',  defaultExtension: 'js' },
-  'rxjs':                       { defaultExtension: 'js' },
-  'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
-};
-
-var ngPackageNames = [
-  'common',
-  'compiler',
-  'core',
-  'http',
-  'platform-browser',
-  'platform-browser-dynamic',
-  'router',
-  'router-deprecated',
-  'upgrade',
-];
-
-// Add package entries for angular packages
-ngPackageNames.forEach(function(pkgName) {
-
-  // Bundled (~40 requests):  DOESN'T WORK IN KARMA OR WALLABY (YET?)
-  //packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
-
-  // Individual files (~300 requests):
-  packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
+System.config({
+  baseURL: '/base',
+  packageWithIndex: true // sadly, we can't use umd packages (yet?)
 });
 
-var config = {
-  baseURL: '/base',
-  map: map,
-  packages: packages
-}
+System.import('systemjs.config.js')
+  .then(function () {
+    return Promise.all([
+      System.import('@angular/core/testing'),
+      System.import('@angular/platform-browser-dynamic/testing')
+    ])
+  })
+  .then(function (providers) {
+    var testing = providers[0];
+    var testingBrowser = providers[1];
 
-System.config(config);
-//////////////
+    testing.setBaseTestProviders(
+      testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+      testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
 
-Promise.all([
-  System.import('@angular/core/testing'),
-  System.import('@angular/platform-browser-dynamic/testing')
-]).then(function (providers) {
-  var testing = providers[0];
-  var testingBrowser = providers[1];
-
-  testing.setBaseTestProviders(
-    testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-    testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
-
-}).then(function() {
-  // Finally, load all spec files.
-  // This will run the tests directly.
-  return Promise.all(
-    allSpecFiles.map(function (moduleName) {
-      return System.import(moduleName);
-    }));
-}).then(__karma__.start, __karma__.error);
+  })
+  .then(function() {
+    // Finally, load all spec files.
+    // This will run the tests directly.
+    return Promise.all(
+      allSpecFiles.map(function (moduleName) {
+        return System.import(moduleName);
+      }));
+  })
+  .then(__karma__.start, __karma__.error);
diff --git a/public/docs/_examples/karma.conf.js b/public/docs/_examples/karma.conf.js
index d39e2ffac8..faa52df98e 100644
--- a/public/docs/_examples/karma.conf.js
+++ b/public/docs/_examples/karma.conf.js
@@ -42,6 +42,7 @@ module.exports = function(config) {
       {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
       {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
 
+      {pattern: 'systemjs.config.js', included: false, watched: false},
       'karma-test-shim.js',
 
       // transpiled application & spec code paths loaded via module imports
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index b89d74462e..3a83c2bdf3 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -38,7 +38,7 @@
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12",
 
-    "angular2-in-memory-web-api": "0.0.9",
+    "angular2-in-memory-web-api": "0.0.10",
     "bootstrap": "^3.3.6"
   },
   "devDependencies": {
@@ -69,7 +69,7 @@
     "style-loader": "^0.13.1",
     "ts-loader": "^0.8.2",
     "typescript": "^1.8.10",
-    "typings": "^0.8.1",
+    "typings": "^1.0.4",
     "webpack": "^1.13.0",
     "webpack-dev-server": "^1.14.1",
     "webpack-merge": "^0.12.0"
diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json
index 776835efa8..504b6e7413 100644
--- a/public/docs/_examples/quickstart/js/package.1.json
+++ b/public/docs/_examples/quickstart/js/package.1.json
@@ -22,7 +22,7 @@
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12",
 
-    "angular2-in-memory-web-api": "0.0.9",
+    "angular2-in-memory-web-api": "0.0.10",
     "bootstrap": "^3.3.6"
   },
   "devDependencies": {
diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json
index 5cac25cd60..6b26bacea1 100644
--- a/public/docs/_examples/quickstart/ts/package.1.json
+++ b/public/docs/_examples/quickstart/ts/package.1.json
@@ -27,13 +27,13 @@
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12",
 
-    "angular2-in-memory-web-api": "0.0.9",
+    "angular2-in-memory-web-api": "0.0.10",
     "bootstrap": "^3.3.6"
   },
   "devDependencies": {
     "concurrently": "^2.0.0",
     "lite-server": "^2.2.0",
     "typescript": "^1.8.10",
-    "typings":"^0.8.1"
+    "typings":"^1.0.4"
   }
 }
diff --git a/public/docs/_examples/quickstart/ts/tsconfig.1.json b/public/docs/_examples/quickstart/ts/tsconfig.1.json
index c9b986dfd6..e6a6eac11d 100644
--- a/public/docs/_examples/quickstart/ts/tsconfig.1.json
+++ b/public/docs/_examples/quickstart/ts/tsconfig.1.json
@@ -8,10 +8,5 @@
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": false
-  },
-  "exclude": [
-    "node_modules",
-    "typings/main",
-    "typings/main.d.ts"
-  ]
+  }
 }
diff --git a/public/docs/_examples/quickstart/ts/typings.1.json b/public/docs/_examples/quickstart/ts/typings.1.json
index ab3d27d712..7e0e18568d 100644
--- a/public/docs/_examples/quickstart/ts/typings.1.json
+++ b/public/docs/_examples/quickstart/ts/typings.1.json
@@ -1,7 +1,7 @@
 {
-  "ambientDependencies": {
+  "globalDependencies": {
     "core-js": "registry:dt/core-js#0.0.0+20160317120654",
-    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
+    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
     "node": "registry:dt/node#4.0.0+20160509154515"
   }
 }
diff --git a/public/docs/_examples/server-communication/dart/.docsync.json b/public/docs/_examples/server-communication/dart/.docsync.json
index 09097599c8..baa578054f 100644
--- a/public/docs/_examples/server-communication/dart/.docsync.json
+++ b/public/docs/_examples/server-communication/dart/.docsync.json
@@ -1,4 +1,4 @@
 {
-  "name": "HTTP client (server communication)"
-  "docHref": "https://angular.io/docs/dart/latest/guide/server-communication.html"
+	"name": "HTTP client (server communication)",
+	"docHref": "https://angular.io/docs/dart/latest/guide/server-communication.html"
 }
diff --git a/public/docs/_examples/style-guide/e2e-spec.js b/public/docs/_examples/style-guide/e2e-spec.js
new file mode 100644
index 0000000000..31b6db0136
--- /dev/null
+++ b/public/docs/_examples/style-guide/e2e-spec.js
@@ -0,0 +1,201 @@
+describe('Style Guide', function () {
+  it('01-01', function () {
+    browser.get('#/01-01');
+
+    var pre = element(by.tagName('toh-heroes > pre'));
+    expect(pre.getText()).toContain('Bombasto');
+    expect(pre.getText()).toContain('Tornado');
+    expect(pre.getText()).toContain('Magneta');
+  });
+
+  it('02-07', function () {
+    browser.get('#/02-07');
+
+    var hero = element(by.tagName('toh-hero > div'));
+    var users = element(by.tagName('admin-users > div'));
+
+    expect(hero.getText()).toBe('hero component');
+    expect(users.getText()).toBe('users component');
+  });
+
+  it('02-08', function () {
+    browser.get('#/02-08');
+
+    var input = element(by.tagName('input[tohvalidate]'));
+    expect(input.isPresent()).toBe(true);
+  });
+
+  it('03-01', function () {
+    browser.get('#/03-01');
+
+    var div = element(by.tagName('sg-app > div'));
+    expect(div.getText()).toBe('The expected error is 42');
+  });
+
+  it('03-02', function () {
+    browser.get('#/03-02');
+
+    var divs = element.all(by.tagName('sg-app > div'));
+    expect(divs.get(0).getText()).toBe('Heroes url: api/heroes');
+    expect(divs.get(1).getText()).toBe('Villains url: api/villains');
+  });
+
+  it('03-03', function () {
+    browser.get('#/03-03');
+
+    var div = element(by.tagName('sg-app > div'));
+    expect(div.getText()).toBe('Our hero is RubberMan and He is so elastic');
+  });
+
+  it('03-04', function () {
+    browser.get('#/03-04');
+
+    var buttons = element.all(by.tagName('sg-app > button'));
+    expect(buttons.get(0).getText()).toBe('Show toast');
+    expect(buttons.get(1).getText()).toBe('Hide toast');
+  });
+
+  it('03-05', function () {
+    browser.get('#/03-05');
+
+    var lis = element.all(by.tagName('sg-app > ul > li'));
+    expect(lis.get(0).getText()).toBe('Windstorm');
+    expect(lis.get(1).getText()).toBe('Bombasto');
+    expect(lis.get(2).getText()).toBe('Magneta');
+    expect(lis.get(3).getText()).toBe('Tornado');
+  });
+
+  it('03-06', function () {
+    browser.get('#/03-06');
+
+    var lis = element.all(by.tagName('sg-app > ul > li'));
+    expect(lis.get(0).getText()).toBe('Windstorm');
+    expect(lis.get(1).getText()).toBe('Bombasto');
+    expect(lis.get(2).getText()).toBe('Magneta');
+    expect(lis.get(3).getText()).toBe('Tornado');
+  });
+
+  it('04-10', function () {
+    browser.get('#/04-10');
+
+    var div = element(by.tagName('sg-app > toh-heroes > div'));
+    expect(div.getText()).toBe('This is heroes component');
+  });
+
+  it('04-14', function () {
+    browser.get('#/04-14');
+
+    var h2 = element(by.tagName('sg-app > toh-heroes > div > h2'));
+    expect(h2.getText()).toBe('My Heroes');
+  });
+
+  it('05-02', function () {
+    browser.get('#/05-02');
+
+    var button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('Hero button');
+  });
+
+  it('05-03', function () {
+    browser.get('#/05-03');
+
+    var button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('Hero button');
+  });
+
+  it('05-04', function () {
+    browser.get('#/05-04');
+
+    var h2 = element(by.tagName('sg-app > toh-heroes > div > h2'));
+    expect(h2.getText()).toBe('My Heroes');
+  });
+
+  it('05-12', function () {
+    browser.get('#/05-12');
+
+    var button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('OK');
+  });
+
+  it('05-13', function () {
+    browser.get('#/05-13');
+
+    var button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('OK');
+  });
+
+  it('05-14', function () {
+    browser.get('#/05-14');
+
+    var toast = element(by.tagName('sg-app > toh-toast'));
+    expect(toast.getText()).toBe('...');
+  });
+
+  it('05-15', function () {
+    browser.get('#/05-15');
+
+    var heroList = element(by.tagName('sg-app > toh-hero-list'));
+    expect(heroList.getText()).toBe('...');
+  });
+
+  it('05-16', function () {
+    browser.get('#/05-16');
+
+    var hero = element(by.tagName('sg-app > toh-hero'));
+    expect(hero.getText()).toBe('...');
+  });
+
+  it('05-17', function () {
+    browser.get('#/05-17');
+
+    var section = element(by.tagName('sg-app > toh-hero-list > section'));
+    expect(section.getText()).toContain('Our list of heroes');
+    expect(section.getText()).toContain('Total powers');
+    expect(section.getText()).toContain('Average power');
+  });
+
+  it('06-01', function () {
+    browser.get('#/06-01');
+
+    var div = element(by.tagName('sg-app > div[tohhighlight]'));
+    expect(div.getText()).toBe('Bombasta');
+  });
+
+  it('06-03', function () {
+    browser.get('#/06-03');
+
+    var input = element(by.tagName('input[tohvalidator]'));
+    expect(input.isPresent()).toBe(true);
+  });
+
+  it('07-01', function () {
+    browser.get('#/07-01');
+
+    var lis = element.all(by.tagName('sg-app > ul > li'));
+    expect(lis.get(0).getText()).toBe('Windstorm');
+    expect(lis.get(1).getText()).toBe('Bombasto');
+    expect(lis.get(2).getText()).toBe('Magneta');
+    expect(lis.get(3).getText()).toBe('Tornado');
+  });
+
+  it('07-03', function () {
+    browser.get('#/07-03');
+
+    var pre = element(by.tagName('toh-heroes > pre'));
+    expect(pre.getText()).toContain('[]');
+  });
+
+  it('07-04', function () {
+    browser.get('#/07-04');
+
+    var pre = element(by.tagName('toh-app > pre'));
+    expect(pre.getText()).toContain('[]');
+  });
+
+  it('09-01', function () {
+    browser.get('#/09-01');
+
+    var button = element(by.tagName('sg-app > toh-hero-button > button'));
+    expect(button.getText()).toBe('OK');
+  });
+});
diff --git a/public/docs/_examples/style-guide/ts/.gitignore b/public/docs/_examples/style-guide/ts/.gitignore
index a6c7c2852d..bd6423cecb 100644
--- a/public/docs/_examples/style-guide/ts/.gitignore
+++ b/public/docs/_examples/style-guide/ts/.gitignore
@@ -1 +1,2 @@
 *.js
+!systemjs.custom.js
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/app.component.css b/public/docs/_examples/style-guide/ts/01-01/app/app.component.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts
index afe49b80a8..a35bd6d420 100644
--- a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts
@@ -7,11 +7,12 @@ import { HeroesComponent } from './heroes/heroes.component';
 import { HeroService } from './heroes/shared/hero.service';
 
 @Component({
+  moduleId: module.id,
   selector: 'toh-app',
   template: `
       <toh-heroes></toh-heroes>
     `,
-  styleUrls: ['app/app.component.css'],
+  styleUrls: ['app.component.css'],
   directives: [HeroesComponent],
   providers: [HeroService]
 })
diff --git a/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts b/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts
new file mode 100644
index 0000000000..408a34f5d6
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/02-07/app/app.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+import { HeroComponent } from './heroes/hero.component';
+import { UsersComponent } from './users/users.component';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <toh-hero></toh-hero>
+    <admin-users></admin-users>
+  `,
+  directives: [HeroComponent, UsersComponent]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts b/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts
index d324036ef0..44c04dd855 100644
--- a/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts
+++ b/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.ts
@@ -1,8 +1,12 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
+  // #enddocregion example
+  template: '<div>hero component</div>',
+  // #docregion example
   selector: 'toh-hero'
 })
 export class HeroComponent {}
diff --git a/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts b/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts
index 6597c57ec0..2fb6d54ebe 100644
--- a/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts
+++ b/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.ts
@@ -1,8 +1,12 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
+  // #enddocregion example
+  template: '<div>users component</div>',
+  // #docregion example
   selector: 'admin-users'
 })
 export class UsersComponent {}
diff --git a/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts b/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts
new file mode 100644
index 0000000000..ffc693e1a7
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/02-08/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { ValidateDirective } from './shared/validate.directive';
+
+@Component({
+  selector: 'sg-app',
+  template: '<input type="text" tohValidate>',
+  directives: [ValidateDirective]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/03-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-01/app/app.component.ts
new file mode 100644
index 0000000000..cd8666bd52
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-01/app/app.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ExceptionService } from './shared/exception.service';
+
+@Component({
+  selector: 'sg-app',
+  template: '<div>The expected error is {{errorCode}}</div>',
+  providers: [ExceptionService]
+})
+export class AppComponent implements OnInit {
+  errorCode: number;
+
+  constructor(private exceptionService: ExceptionService) { }
+
+  ngOnInit() {
+    this.errorCode = this.exceptionService.getException();
+  }
+}
diff --git a/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts b/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts
index dd149b2046..dd77b4f7dc 100644
--- a/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts
+++ b/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts
@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 import { Injectable } from '@angular/core';
 
@@ -5,5 +6,9 @@ import { Injectable } from '@angular/core';
 // #docregion example
 export class ExceptionService {
   constructor() { }
+  // #enddocregion example
+  // testing harness
+  getException() { return 42; }
+  // #docregion example
 }
 // #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-02/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-02/app/app.component.ts
new file mode 100644
index 0000000000..a434f05635
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-02/app/app.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { HEROES_URL, VILLAINS_URL } from './shared/data.service';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <div>Heroes url: {{heroesUrl}}</div>
+    <div>Villains url: {{villainsUrl}}</div>
+  `,
+})
+export class AppComponent {
+  heroesUrl = HEROES_URL;
+  villainsUrl = VILLAINS_URL;
+}
diff --git a/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.ts b/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.ts
index fedc4f3caf..ad665a99c2 100644
--- a/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.ts
+++ b/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.ts
@@ -1,5 +1,5 @@
 // #docregion
 // #docregion example
 export const HEROES_URL = 'api/heroes';
-export const VILLAIN_URL = 'api/villains';
+export const VILLAINS_URL = 'api/villains';
 // #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-03/app/app.component.ts
new file mode 100644
index 0000000000..bd2f43025d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-03/app/app.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroCollectorService } from './shared/hero-collector.service';
+import { Hero } from './shared/hero.model';
+
+@Component({
+  selector: 'sg-app',
+  template: '<div>Our hero is {{hero.name}} and {{hero.power}}</div>',
+  providers: [HeroCollectorService]
+})
+export class AppComponent implements OnInit {
+  hero: Hero;
+
+  constructor(private heroCollectorService: HeroCollectorService) { }
+
+  ngOnInit() {
+    this.hero = this.heroCollectorService.getHero();
+  }
+}
diff --git a/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts b/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts
index 4be6b989c2..1df5c0deb0 100644
--- a/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts
+++ b/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts
@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 // #docregion example
 import { Injectable } from '@angular/core';
@@ -9,5 +10,16 @@ export class HeroCollectorService {
   hero: Hero;
 
   constructor() { }
+  // #enddocregion example
+  // testing harness
+  getHero() {
+    this.hero = {
+      name: 'RubberMan',
+      power: 'He is so elastic'
+    };
+
+    return this.hero;
+  }
+  // #docregion example
 }
 // #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-04/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-04/app/app.component.ts
new file mode 100644
index 0000000000..83e9e8f038
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-04/app/app.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+
+import { ToastService } from './shared/toast.service';
+
+@Component({
+  selector: 'sg-app',
+  template: `
+    <button (click)="show()">Show toast</button>
+    <button (click)="hide()">Hide toast</button>
+  `,
+  providers: [ToastService]
+})
+export class AppComponent implements OnInit {
+  constructor(private toastService: ToastService) { }
+
+  hide() {
+    this.toastService.hide();
+  }
+
+  show() {
+    this.toastService.show();
+  }
+
+  ngOnInit() {
+    this.toastService.activate('Hello style-guide!');
+  }
+}
diff --git a/public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.avoid.ts b/public/docs/_examples/style-guide/ts/03-04/app/shared/toast.service.avoid.ts
similarity index 100%
rename from public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.avoid.ts
rename to public/docs/_examples/style-guide/ts/03-04/app/shared/toast.service.avoid.ts
diff --git a/public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts b/public/docs/_examples/style-guide/ts/03-04/app/shared/toast.service.ts
similarity index 70%
rename from public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts
rename to public/docs/_examples/style-guide/ts/03-04/app/shared/toast.service.ts
index 228a4dbd6b..ab148a1732 100644
--- a/public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts
+++ b/public/docs/_examples/style-guide/ts/03-04/app/shared/toast.service.ts
@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 // #docregion example
 import { Injectable } from '@angular/core';
@@ -21,5 +22,11 @@ export class ToastService {
   private log() {
     console.log(this.message);
   }
+  // #enddocregion example
+  // testing harness
+  activate(message: string) {
+    this.message = message;
+  }
+  // #docregion example
 }
 // #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts
index 817fdbead1..85fa486432 100644
--- a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts
+++ b/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts
@@ -19,7 +19,7 @@ export class HeroService {
   ) { }
 
   getHero(id: number) {
-    return this.http.get(`api/heroes/${id}`)
+    return this.http.get(`app/heroes/${id}`)
       .map((res: Response) => res.json().data);
   }
 
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/app.component.html b/public/docs/_examples/style-guide/ts/03-05/app/app.component.html
new file mode 100644
index 0000000000..3c05329f3f
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/app.component.html
@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-05/app/app.component.ts
new file mode 100644
index 0000000000..9cc5ee4ec3
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/app.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroService } from './+heroes/shared/hero.service';
+import { ExceptionService, SpinnerService, ToastService } from './shared';
+import { Hero } from './+heroes/shared/hero.model';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  providers: [HeroService, ExceptionService, SpinnerService, ToastService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/app.component.html b/public/docs/_examples/style-guide/ts/03-06/app/app.component.html
new file mode 100644
index 0000000000..3c05329f3f
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/app.component.html
@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts b/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts
new file mode 100644
index 0000000000..9cc5ee4ec3
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/app.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroService } from './+heroes/shared/hero.service';
+import { ExceptionService, SpinnerService, ToastService } from './shared';
+import { Hero } from './+heroes/shared/hero.model';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  providers: [HeroService, ExceptionService, SpinnerService, ToastService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html
new file mode 100644
index 0000000000..1244e68a4a
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.html
@@ -0,0 +1 @@
+<div>This is heroes component</div>
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts
index ba822be033..9ca611ee5c 100644
--- a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts
+++ b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts
@@ -15,12 +15,13 @@ import {
 
 @Component({
   // #enddocregion example
+  moduleId: module.id,
   providers: [EntityService, ExceptionService, SpinnerService, ToastService],
   directives: [FilterTextComponent],
   pipes: [InitCapsPipe],
   // #docregion example
   selector: 'toh-heroes',
-  templateUrl: 'app/+heroes/heroes.component.html'
+  templateUrl: 'heroes.component.html'
 })
 export class HeroesComponent implements OnInit {
   // #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts
index 8e143a5a59..e0c50dc7e7 100644
--- a/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts
@@ -6,8 +6,8 @@ import { HeroesComponent } from './+heroes/index';
 // #enddocregion example
 
 @Component({
-  selector: 'toh-app',
-  template: '<div>app</div>',
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>',
   directives: [HeroesComponent]
 })
 export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/index.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/index.ts
index 3c20b39ad7..faee6ada96 100644
--- a/public/docs/_examples/style-guide/ts/04-10/app/shared/index.ts
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/index.ts
@@ -11,13 +11,13 @@ export * from './spinner';
 export * from './toast';
 // #enddocregion example
 
-import {EntityService} from './entity.service';
-import {ExceptionService} from './exception.service';
-import {FilterService} from './filter-text';
-import {InitCapsPipe} from './init-caps.pipe';
-import {ModalService} from './modal';
-import {SpinnerService} from './spinner';
-import {ToastService} from './toast';
+import { EntityService } from './entity.service';
+import { ExceptionService } from './exception.service';
+import { FilterService } from './filter-text';
+import { InitCapsPipe } from './init-caps.pipe';
+import { ModalService } from './modal';
+import { SpinnerService } from './spinner';
+import { ToastService } from './toast';
 
 export const BLOCK_PROVIDERS = [
   EntityService,
diff --git a/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts b/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts
new file mode 100644
index 0000000000..8ceb6f5de0
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-14/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroesComponent } from './heroes/heroes.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>',
+  directives: [HeroesComponent]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html
index b899229cab..b6bf75ef1a 100644
--- a/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html
+++ b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html
@@ -2,7 +2,7 @@
 <div>
   <h2>My Heroes</h2>
   <ul class="heroes">
-    <li *ngFor="#hero of heroes">
+    <li *ngFor="let hero of heroes">
       <span class="badge">{{hero.id}}</span> {{hero.name}}
     </li>
   </ul>
diff --git a/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts
index c72952e2c7..da3520ccce 100644
--- a/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts
+++ b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts
@@ -7,6 +7,7 @@ import { Logger } from '../shared/logger.service';
 // #enddocregion example
 
 @Component({
+  moduleId: module.id,
   selector: 'toh-heroes',
   templateUrl: 'heroes.component.html',
   styleUrls:  ['heroes.component.css'],
diff --git a/public/docs/_examples/style-guide/ts/04-15/app/+heroes/index.ts b/public/docs/_examples/style-guide/ts/04-15/app/+heroes/index.ts
deleted file mode 100644
index 45d52e8c70..0000000000
--- a/public/docs/_examples/style-guide/ts/04-15/app/+heroes/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Needed for the .avoid code to compile
-export const HeroesComponent = 42;
diff --git a/public/docs/_examples/style-guide/ts/04-15/app/app.component.avoid.ts b/public/docs/_examples/style-guide/ts/04-15/app/app.component.avoid.ts
deleted file mode 100644
index d41269c2c5..0000000000
--- a/public/docs/_examples/style-guide/ts/04-15/app/app.component.avoid.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-// #docregion example
-import { HeroesComponent } from './+heroes';
-// #enddocregion example
-
-@Component({
-  selector: 'toh-app'
-})
-export class AppComponent {}
diff --git a/public/docs/_examples/style-guide/ts/04-16/app/+heroes/index.ts b/public/docs/_examples/style-guide/ts/04-16/app/+heroes/index.ts
deleted file mode 100644
index 45d52e8c70..0000000000
--- a/public/docs/_examples/style-guide/ts/04-16/app/+heroes/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Needed for the .avoid code to compile
-export const HeroesComponent = 42;
diff --git a/public/docs/_examples/style-guide/ts/04-16/app/app.component.avoid.ts b/public/docs/_examples/style-guide/ts/04-16/app/app.component.avoid.ts
deleted file mode 100644
index d41269c2c5..0000000000
--- a/public/docs/_examples/style-guide/ts/04-16/app/app.component.avoid.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-// #docregion example
-import { HeroesComponent } from './+heroes';
-// #enddocregion example
-
-@Component({
-  selector: 'toh-app'
-})
-export class AppComponent {}
diff --git a/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts
new file mode 100644
index 0000000000..aec6735502
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-02/app/app.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
index ec7145d349..7be30dc913 100644
--- a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -1,10 +1,15 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 // #docregion example
 /* avoid */
 
 @Component({
-  selector: 'tohHeroButton'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: 'tohHeroButton',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.html b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.html
new file mode 100644
index 0000000000..9ad67e50ac
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.html
@@ -0,0 +1 @@
+<button class="hero-button">Hero button</button>
diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts
index 523fc4e2fb..439ce328d5 100644
--- a/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts
@@ -1,9 +1,14 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
-  selector: 'toh-hero-button'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: 'toh-hero-button',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.html b/public/docs/_examples/style-guide/ts/05-03/app/app.component.avoid.html
similarity index 100%
rename from public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.html
rename to public/docs/_examples/style-guide/ts/05-03/app/app.component.avoid.html
diff --git a/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts
new file mode 100644
index 0000000000..aec6735502
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-03/app/app.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
index e7358e4de6..4cbf731912 100644
--- a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -1,10 +1,15 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 // #docregion example
 /* avoid */
 
 @Component({
-  selector: '[tohHeroButton]'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: '[tohHeroButton]',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.html b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.html
new file mode 100644
index 0000000000..9ad67e50ac
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.html
@@ -0,0 +1 @@
+<button class="hero-button">Hero button</button>
diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts
index 523fc4e2fb..439ce328d5 100644
--- a/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts
@@ -1,9 +1,14 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
 // #docregion example
 @Component({
-  selector: 'toh-hero-button'
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
+  selector: 'toh-hero-button',
+  templateUrl: 'hero-button.component.html'
 })
 export class HeroButtonComponent {}
 // #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts
new file mode 100644
index 0000000000..8ceb6f5de0
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-04/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroesComponent } from './heroes/heroes.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-heroes></toh-heroes>',
+  directives: [HeroesComponent]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts
index ec91f419a5..0c59fac703 100644
--- a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts
@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 import { Component, OnInit } from '@angular/core';
 
@@ -5,6 +6,9 @@ import { Hero } from './shared/hero.model';
 
 // #docregion example
 @Component({
+  // #enddocregion example
+  moduleId: module.id,
+  // #docregion example
   selector: 'toh-heroes',
   templateUrl: 'heroes.component.html',
   styleUrls:  ['heroes.component.css']
diff --git a/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts
new file mode 100644
index 0000000000..3f1ce4a4fa
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-12/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-button label="OK"></toh-hero-button>',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts
index cc2ccd6e98..b299740765 100644
--- a/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts
@@ -4,7 +4,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 // #docregion example
 @Component({
   selector: 'toh-hero-button',
-  template: `<button>OK</button>`
+  template: `<button>{{label}}</button>`
 })
 export class HeroButtonComponent {
   @Output() change = new EventEmitter<any>();
diff --git a/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts
new file mode 100644
index 0000000000..aec6735502
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-13/app/app.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts
new file mode 100644
index 0000000000..29ad33703f
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-14/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { ToastComponent } from './shared/toast/toast.component';
+
+@Component({
+  selector: 'sg-app',
+  template: `<toh-toast></toh-toast>`,
+  directives: [ToastComponent]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.ts b/public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.ts
index e9d2a23e65..5a56ad6c04 100644
--- a/public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.ts
@@ -2,7 +2,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'my-toast',
+  selector: 'toh-toast',
   template: `...`
 })
 // #docregion example
diff --git a/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts
new file mode 100644
index 0000000000..cb8cf26877
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-15/app/app.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+import { HeroListComponent } from './heroes/hero-list/hero-list.component';
+import { HeroService } from './heroes/shared';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-list></toh-hero-list>',
+  directives: [HeroListComponent],
+  providers: [HeroService]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts
index 48da4c7ee4..1fdb893c13 100644
--- a/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts
@@ -1,7 +1,7 @@
 // #docregion example
 import { Component, OnInit } from '@angular/core';
 
-import { Hero, HeroService } from '../shared/index';
+import { Hero, HeroService } from '../shared';
 
 @Component({
   selector: 'toh-hero-list',
@@ -10,13 +10,13 @@ import { Hero, HeroService } from '../shared/index';
 export class HeroListComponent implements OnInit {
   heroes: Hero[];
   constructor(private heroService: HeroService) {}
-  getHeros() {
+  getHeroes() {
     this.heroes = [];
     this.heroService.getHeroes()
       .subscribe(heroes => this.heroes = heroes);
   }
   ngOnInit() {
-    this.getHeros();
+    this.getHeroes();
   }
 }
 // #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/index.ts
index 330dbe676c..27516fdedd 100644
--- a/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/index.ts
+++ b/public/docs/_examples/style-guide/ts/05-15/app/heroes/shared/index.ts
@@ -1,3 +1,3 @@
 // #docregion
-export * from './hero.model.ts';
-export * from './hero.service.ts';
+export * from './hero.model';
+export * from './hero.service';
diff --git a/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts
new file mode 100644
index 0000000000..297fb5b74d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-16/app/app.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HeroComponent } from './heroes/hero.component';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HeroComponent]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts
new file mode 100644
index 0000000000..e9437befb4
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-17/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroListComponent } from './heroes/hero-list/hero-list.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-list></toh-hero-list>',
+  directives: [HeroListComponent]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts
index f78deda2bf..8570544a36 100644
--- a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/hero-list.component.ts
@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 import { Component } from '@angular/core';
 
@@ -20,6 +21,13 @@ export class HeroListComponent {
   heroes: Hero[];
   totalPowers: number;
 
+  // #enddocregion example
+  // testing harness
+  constructor() {
+    this.heroes = [];
+  }
+
+  // #docregion example
   get avgPower() {
     return this.totalPowers / this.heroes.length;
   }
diff --git a/public/docs/_examples/style-guide/ts/06-01/app/app.component.html b/public/docs/_examples/style-guide/ts/06-01/app/app.component.html
index 82b7c0a173..2ccf87d0f5 100644
--- a/public/docs/_examples/style-guide/ts/06-01/app/app.component.html
+++ b/public/docs/_examples/style-guide/ts/06-01/app/app.component.html
@@ -1,2 +1,2 @@
 <!-- #docregion -->
-<div [tohHighlight]>Bombasta</div>
+<div tohHighlight>Bombasta</div>
diff --git a/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts
new file mode 100644
index 0000000000..bd1374520d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/06-01/app/app.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+import { HighlightDirective } from './shared/highlight.directive';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  directives: [HighlightDirective]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts b/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts
new file mode 100644
index 0000000000..dbc24dfc2d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/06-03/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { ValidatorDirective } from './shared/validate.directive';
+
+@Component({
+  selector: 'sg-app',
+  template: '<input type="text" tohValidator>',
+  directives: [ValidatorDirective]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/07-01/app/app.component.html b/public/docs/_examples/style-guide/ts/07-01/app/app.component.html
new file mode 100644
index 0000000000..3c05329f3f
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/07-01/app/app.component.html
@@ -0,0 +1,5 @@
+<ul>
+  <li *ngFor="let hero of heroes">
+    {{hero.name}}
+  </li>
+</ul>
diff --git a/public/docs/_examples/style-guide/ts/07-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/07-01/app/app.component.ts
new file mode 100644
index 0000000000..5c6491c86c
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/07-01/app/app.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+
+import { HeroService } from './heroes/shared/hero.service';
+import { Hero } from './heroes/shared/hero.model';
+
+@Component({
+  moduleId: module.id,
+  selector: 'sg-app',
+  templateUrl: 'app.component.html',
+  providers: [HeroService]
+})
+export class AppComponent implements OnInit {
+  heroes: Hero[];
+
+  constructor(private heroService: HeroService) { }
+
+  ngOnInit() {
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
+  }
+}
diff --git a/public/docs/_examples/style-guide/ts/07-04/app/app.component.ts b/public/docs/_examples/style-guide/ts/07-04/app/app.component.ts
new file mode 100644
index 0000000000..608d7cf403
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/07-04/app/app.component.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { Component } from '@angular/core';
+
+import { HeroArena, HeroService, Hero } from './heroes/shared';
+
+@Component({
+  selector: 'toh-app',
+  template: '<pre>{{heroes | json}}</pre>',
+  providers: [HeroArena, HeroService]
+})
+export class AppComponent {
+  heroes: Hero[] = [];
+
+  constructor(private heroArena: HeroArena) { }
+
+  ngOnInit() {
+    this.heroArena.getParticipants().subscribe(heroes => this.heroes = heroes);
+  }
+}
diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts
index 7b08875fdc..42bc51f9e9 100644
--- a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts
+++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts
@@ -1,3 +1,4 @@
+// #docplaster
 // #docregion
 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';
@@ -10,5 +11,11 @@ export class HeroArena {
   constructor(
     private heroService: HeroService,
     private http: Http) {}
+    // #enddocregion example
+    // test harness
+    getParticipants() {
+      return this.heroService.getHeroes();
+    }
+    // #docregion example
 }
 // #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts
index 27516fdedd..e8ba54b540 100644
--- a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts
+++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts
@@ -1,3 +1,4 @@
 // #docregion
 export * from './hero.model';
 export * from './hero.service';
+export * from './hero-arena.service';
diff --git a/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts
new file mode 100644
index 0000000000..089468ba0a
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/09-01/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { HeroButtonComponent } from './heroes/shared/hero-button/hero-button.component';
+
+@Component({
+  selector: 'sg-app',
+  template: '<toh-hero-button></toh-hero-button>',
+  directives: [HeroButtonComponent]
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts b/public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts
index 5624b82b25..cc69810dee 100644
--- a/public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts
+++ b/public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts
@@ -4,7 +4,7 @@ import { Component, OnInit } from '@angular/core';
 // #docregion example
 @Component({
   selector: 'toh-hero-button',
-  template: `<button>OK<button>`
+  template: `<button>OK</button>`
 })
 export class HeroButtonComponent implements OnInit {
   ngOnInit() {
diff --git a/public/docs/_examples/style-guide/ts/app/app.component.html b/public/docs/_examples/style-guide/ts/app/app.component.html
new file mode 100644
index 0000000000..0680b43f9c
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/app/app.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
diff --git a/public/docs/_examples/style-guide/ts/app/app.component.ts b/public/docs/_examples/style-guide/ts/app/app.component.ts
new file mode 100644
index 0000000000..33448ba587
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/app/app.component.ts
@@ -0,0 +1,65 @@
+import { Component } from '@angular/core';
+import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
+
+import { AppComponent as S0101 } from '../01-01/app/app.component';
+import { AppComponent as S0207 } from '../02-07/app/app.component';
+import { AppComponent as S0208 } from '../02-08/app/app.component';
+import { AppComponent as S0301 } from '../03-01/app/app.component';
+import { AppComponent as S0302 } from '../03-02/app/app.component';
+import { AppComponent as S0303 } from '../03-03/app/app.component';
+import { AppComponent as S0304 } from '../03-04/app/app.component';
+import { AppComponent as S0305 } from '../03-05/app/app.component';
+import { AppComponent as S0306 } from '../03-06/app/app.component';
+import { AppComponent as S0410 } from '../04-10/app/app.component';
+import { AppComponent as S0414 } from '../04-14/app/app.component';
+import { AppComponent as S0502 } from '../05-02/app/app.component';
+import { AppComponent as S0503 } from '../05-03/app/app.component';
+import { AppComponent as S0504 } from '../05-04/app/app.component';
+import { AppComponent as S0512 } from '../05-12/app/app.component';
+import { AppComponent as S0513 } from '../05-13/app/app.component';
+import { AppComponent as S0514 } from '../05-14/app/app.component';
+import { AppComponent as S0515 } from '../05-15/app/app.component';
+import { AppComponent as S0516 } from '../05-16/app/app.component';
+import { AppComponent as S0517 } from '../05-17/app/app.component';
+import { AppComponent as S0601 } from '../06-01/app/app.component';
+import { AppComponent as S0603 } from '../06-03/app/app.component';
+import { AppComponent as S0701 } from '../07-01/app/app.component';
+import { AppComponent as S0703 } from '../07-03/app/app.component';
+import { AppComponent as S0704 } from '../07-04/app/app.component';
+import { AppComponent as S0901 } from '../09-01/app/app.component';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: 'app/app.component.html',
+  directives: [ROUTER_DIRECTIVES]
+})
+@RouteConfig([
+  { path: '/01-01', name: '01-01', component: S0101 },
+  { path: '/02-07', name: '02-07', component: S0207 },
+  { path: '/02-08', name: '02-08', component: S0208 },
+  { path: '/03-01', name: '03-01', component: S0301 },
+  { path: '/03-02', name: '03-02', component: S0302 },
+  { path: '/03-03', name: '03-03', component: S0303 },
+  { path: '/03-04', name: '03-04', component: S0304 },
+  { path: '/03-05', name: '03-05', component: S0305 },
+  { path: '/03-06', name: '03-06', component: S0306 },
+  { path: '/04-10', name: '04-10', component: S0410 },
+  { path: '/04-14', name: '04-14', component: S0414 },
+  { path: '/05-02', name: '05-02', component: S0502 },
+  { path: '/05-03', name: '05-03', component: S0503 },
+  { path: '/05-04', name: '05-04', component: S0504 },
+  { path: '/05-12', name: '05-12', component: S0512 },
+  { path: '/05-13', name: '05-13', component: S0513 },
+  { path: '/05-14', name: '05-14', component: S0514 },
+  { path: '/05-15', name: '05-15', component: S0515 },
+  { path: '/05-16', name: '05-16', component: S0516 },
+  { path: '/05-17', name: '05-17', component: S0517 },
+  { path: '/06-01', name: '06-01', component: S0601 },
+  { path: '/06-03', name: '06-03', component: S0603 },
+  { path: '/07-01', name: '07-01', component: S0701 },
+  { path: '/07-03', name: '07-03', component: S0703 },
+  { path: '/07-04', name: '07-04', component: S0704 },
+  { path: '/09-01', name: '09-01', component: S0901 },
+
+])
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/app/hero-data.ts b/public/docs/_examples/style-guide/ts/app/hero-data.ts
new file mode 100644
index 0000000000..001af65e85
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/app/hero-data.ts
@@ -0,0 +1,11 @@
+export class HeroData {
+  createDb() {
+    let heroes = [
+      { id: '1', name: 'Windstorm' },
+      { id: '2', name: 'Bombasto' },
+      { id: '3', name: 'Magneta' },
+      { id: '4', name: 'Tornado' }
+    ];
+    return {heroes};
+  }
+}
diff --git a/public/docs/_examples/style-guide/ts/app/main.ts b/public/docs/_examples/style-guide/ts/app/main.ts
new file mode 100644
index 0000000000..5eec1d8f88
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/app/main.ts
@@ -0,0 +1,17 @@
+import { bootstrap }        from '@angular/platform-browser-dynamic';
+import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
+import { XHRBackend, HTTP_PROVIDERS } from '@angular/http';
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api';
+import 'rxjs/add/operator/map';
+
+import { HeroData } from './hero-data';
+import { AppComponent }     from './app.component';
+
+bootstrap(AppComponent, [
+  ROUTER_PROVIDERS,
+  HTTP_PROVIDERS,
+  { provide: LocationStrategy, useClass: HashLocationStrategy },
+  { provide: XHRBackend, useClass: InMemoryBackendService },
+  { provide: SEED_DATA,  useClass: HeroData }
+  ]);
diff --git a/public/docs/_examples/style-guide/ts/index.html b/public/docs/_examples/style-guide/ts/index.html
index 820bf59a96..44a280de44 100644
--- a/public/docs/_examples/style-guide/ts/index.html
+++ b/public/docs/_examples/style-guide/ts/index.html
@@ -17,6 +17,7 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
 
     <script src="systemjs.config.js"></script>
+    <script src="systemjs.custom.js"></script>
     <script>
       System.import('app').catch(function(err){ console.error(err); });
     </script>
diff --git a/public/docs/_examples/style-guide/ts/systemjs.custom.js b/public/docs/_examples/style-guide/ts/systemjs.custom.js
new file mode 100644
index 0000000000..4909a1d1a2
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/systemjs.custom.js
@@ -0,0 +1,44 @@
+(function(global) {
+  // extra local packages
+  var packageNames = [
+    '01-01',
+    '02-07',
+    '02-08',
+    '03-01',
+    '03-02',
+    '03-03',
+    '03-04',
+    '03-05', '03-05/app/shared', '03-05/app/shared/spinner', '03-05/app/shared/toast',
+    '03-06', '03-06/app/shared', '03-06/app/shared/spinner', '03-06/app/shared/toast',
+    '04-10', '04-10/app/shared', '04-10/app/+heroes', '04-10/app/shared/spinner', '04-10/app/shared/toast',
+      '04-10/app/shared/filter-text', '04-10/app/shared/modal', '04-10/app/shared/nav',
+    '04-14',
+    '05-02',
+    '05-03',
+    '05-04',
+    '05-12',
+    '05-13',
+    '05-14',
+    '05-15', '05-15/app/heroes/shared',
+    '05-16',
+    '05-17',
+    '06-01',
+    '06-03',
+    '07-01',
+    '07-03',
+    '07-04', '07-04/app/heroes/shared',
+    '09-01'
+  ];
+
+  var packages = {};
+  packageNames.forEach(function(pkgName) {
+    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  });
+
+  var config = {
+    packages: packages
+  }
+
+  System.config(config);
+
+})(this);
diff --git a/public/docs/_examples/styleguide/js/app.js b/public/docs/_examples/styleguide/js/app.js
index a590cd7ed7..7ac0466c2c 100644
--- a/public/docs/_examples/styleguide/js/app.js
+++ b/public/docs/_examples/styleguide/js/app.js
@@ -4,11 +4,9 @@
 var AppComponent = ng
     // #docregion component
     .Component({
-      selector: 'my-app'
-    })
+      selector: 'my-app',
     // #enddocregion
     // #docregion view
-    .View({
       template: '<h1 id="output">My First Angular 2 App</h1>'
     })
     // #enddocregion
diff --git a/public/docs/_examples/styleguide/js/index.html b/public/docs/_examples/styleguide/js/index.html
index 789b38144a..27c8930e59 100644
--- a/public/docs/_examples/styleguide/js/index.html
+++ b/public/docs/_examples/styleguide/js/index.html
@@ -6,9 +6,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.sfx.dev.js"></script>
-    <script src="app.js"></script>
+    <!-- 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>foo2</my-app>
   </body>
diff --git a/public/docs/_examples/styleguide/ts/app.ts b/public/docs/_examples/styleguide/ts/app.ts
index e6d0d92e49..68eb2b4348 100644
--- a/public/docs/_examples/styleguide/ts/app.ts
+++ b/public/docs/_examples/styleguide/ts/app.ts
@@ -1,13 +1,13 @@
 // #docregion
 // #docregion import
-import {Component, View, bootstrap} from '@angular/angular2';
+import { Component } from '@angular/core';
+import { bootstrap } from '@angular/platform-browser-dynamic';
+
 // #enddocregion
 
 // #docregion class-w-annotations
 @Component({
-  selector: 'my-app'
-})
-@View({
+  selector: 'my-app',
   template: '<h1 id="output">My First Angular 2 App</h1>'
 })
 // #docregion class
@@ -18,4 +18,4 @@ class AppComponent { }
 // #docregion bootstrap
 bootstrap(AppComponent);
 // #enddocregion
-// #enddocregion
\ No newline at end of file
+// #enddocregion
diff --git a/public/docs/_examples/systemjs.config.js b/public/docs/_examples/systemjs.config.js
index 56d5f61e5f..0cdf7d40bc 100644
--- a/public/docs/_examples/systemjs.config.js
+++ b/public/docs/_examples/systemjs.config.js
@@ -32,15 +32,20 @@
     'upgrade',
   ];
 
-  // Add package entries for angular packages
-  ngPackageNames.forEach(function(pkgName) {
+  // Individual files (~300 requests):
+  function packIndex(pkgName) {
+    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  }
 
-    // Bundled (~40 requests):
+  // Bundled (~40 requests):
+  function packUmd(pkgName) {
     packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
+  };
 
-    // Individual files (~300 requests):
-    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
-  });
+  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
+
+  // Add package entries for angular packages
+  ngPackageNames.forEach(setPackageConfig);
 
   var config = {
     map: map,
diff --git a/public/docs/_examples/testing/ts/tsconfig.1.json b/public/docs/_examples/testing/ts/tsconfig.1.json
index 6ee6719cb3..062cf1bcb4 100644
--- a/public/docs/_examples/testing/ts/tsconfig.1.json
+++ b/public/docs/_examples/testing/ts/tsconfig.1.json
@@ -9,10 +9,5 @@
     "removeComments": false,
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true
-  },
-  "exclude": [
-    "node_modules",
-    "typings/main",
-    "typings/main.d.ts"
-  ]
+  }
 }
diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
index 6070e76eb6..988d51fee9 100644
--- a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
@@ -16,17 +16,17 @@ export class DashboardComponent implements OnInit {
   heroes: Hero[] = [];
 
   constructor(
-    private _router: Router,
-    private _heroService: HeroService) {
+    private router: Router,
+    private heroService: HeroService) {
   }
 
   ngOnInit() {
-    this._heroService.getHeroes()
+    this.heroService.getHeroes()
       .then(heroes => this.heroes = heroes.slice(1,5));
   }
 
   gotoDetail(hero: Hero) {
     let link = ['HeroDetail', { id: hero.id }];
-    this._router.navigate(link);
+    this.router.navigate(link);
   }
 }
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 7b2889e592..73ea334fc2 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,10 +1,11 @@
 // #docplaster
 // #docregion
-import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { RouteParams } from '@angular/router-deprecated';
 
 import { Hero }        from './hero';
 import { HeroService } from './hero.service';
+
 @Component({
   selector: 'my-hero-detail',
   templateUrl: 'app/hero-detail.component.html',
@@ -17,16 +18,16 @@ export class HeroDetailComponent implements OnInit {
   navigated = false; // true if navigated here
 
   constructor(
-    private _heroService: HeroService,
-    private _routeParams: RouteParams) {
+    private heroService: HeroService,
+    private routeParams: RouteParams) {
   }
 
   // #docregion ngOnInit
   ngOnInit() {
-    if (this._routeParams.get('id') !== null) {
-      let id = +this._routeParams.get('id');
+    if (this.routeParams.get('id') !== null) {
+      let id = +this.routeParams.get('id');
       this.navigated = true;
-      this._heroService.getHero(id)
+      this.heroService.getHero(id)
           .then(hero => this.hero = hero);
     } else {
       this.navigated = false;
@@ -36,7 +37,7 @@ export class HeroDetailComponent implements OnInit {
   // #enddocregion ngOnInit
   // #docregion save
   save() {
-    this._heroService
+    this.heroService
         .save(this.hero)
         .then(hero => {
           this.hero = hero; // saved hero, w/ id if new
@@ -45,9 +46,11 @@ export class HeroDetailComponent implements OnInit {
         .catch(error => this.error = error); // TODO: Display error message
   }
   // #enddocregion save
+  // #docregion goback
   goBack(savedHero: Hero = null) {
     this.close.emit(savedHero);
     if (this.navigated) { window.history.back(); }
   }
+  // #enddocregion goback
 }
 
diff --git a/public/docs/_examples/toh-6/ts/app/hero.service.ts b/public/docs/_examples/toh-6/ts/app/hero.service.ts
index b4b0854141..fa1e1ac4e4 100644
--- a/public/docs/_examples/toh-6/ts/app/hero.service.ts
+++ b/public/docs/_examples/toh-6/ts/app/hero.service.ts
@@ -1,7 +1,7 @@
 // #docplaster
 // #docregion
 import { Injectable }    from '@angular/core';
-import { Http, Headers } from '@angular/http';
+import { Headers, Http } from '@angular/http';
 
 // #docregion rxjs
 import 'rxjs/add/operator/toPromise';
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.ts b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
index 71ce908c60..df3f26c69b 100644
--- a/public/docs/_examples/toh-6/ts/app/heroes.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
@@ -21,11 +21,11 @@ export class HeroesComponent implements OnInit {
   error: any;
 
   constructor(
-    private _router: Router,
-    private _heroService: HeroService) { }
+    private router: Router,
+    private heroService: HeroService) { }
 
   getHeroes() {
-    this._heroService
+    this.heroService
         .getHeroes()
         .then(heroes => this.heroes = heroes)
         .catch(error => this.error = error); // TODO: Display error message
@@ -46,7 +46,7 @@ export class HeroesComponent implements OnInit {
   // #docregion delete
   delete(hero: Hero, event: any) {
     event.stopPropagation();
-    this._heroService
+    this.heroService
         .delete(hero)
         .then(res => {
           this.heroes = this.heroes.filter(h => h !== hero);
@@ -66,6 +66,6 @@ export class HeroesComponent implements OnInit {
   }
 
   gotoDetail() {
-    this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
+    this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
   }
 }
diff --git a/public/docs/_examples/tsconfig.json b/public/docs/_examples/tsconfig.json
index 302417ff3d..fd1d10190d 100644
--- a/public/docs/_examples/tsconfig.json
+++ b/public/docs/_examples/tsconfig.json
@@ -9,10 +9,5 @@
     "removeComments": false,
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true
-  },
-  "exclude": [
-    "node_modules",
-    "typings/main",
-    "typings/main.d.ts"
-  ]
+  }
 }
diff --git a/public/docs/_examples/typings.json b/public/docs/_examples/typings.json
index ab3d27d712..7e0e18568d 100644
--- a/public/docs/_examples/typings.json
+++ b/public/docs/_examples/typings.json
@@ -1,7 +1,7 @@
 {
-  "ambientDependencies": {
+  "globalDependencies": {
     "core-js": "registry:dt/core-js#0.0.0+20160317120654",
-    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
+    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
     "node": "registry:dt/node#4.0.0+20160509154515"
   }
 }
diff --git a/public/docs/_examples/wallaby.js b/public/docs/_examples/wallaby.js
index 2648c2c3aa..28053a11fe 100644
--- a/public/docs/_examples/wallaby.js
+++ b/public/docs/_examples/wallaby.js
@@ -8,6 +8,7 @@ module.exports = function () {
     files: [
       // System.js for module loading
       {pattern: 'node_modules/systemjs/dist/system.js', instrument: false},
+      {pattern: 'systemjs.config.js', instrument: false},
 
       // Polyfills
       {pattern: 'node_modules/core-js/client/shim.min.js', instrument: false},
@@ -38,86 +39,39 @@ module.exports = function () {
 
     bootstrap: function (wallaby) {
       wallaby.delayStart();
-      systemConfig();
 
-      Promise.all([
-        System.import('@angular/core/testing'),
-        System.import('@angular/platform-browser-dynamic/testing')
-      ])
-      .then(function (providers) {
-        var testing = providers[0];
-        var testingBrowser = providers[1];
-
-        testing.setBaseTestProviders(
-          testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-          testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
-
-
-        // Load all spec files
-        return Promise.all(wallaby.tests.map(function (specFile) {
-          return System.import(specFile);
-        }));
-      })
-      .then(function () {
-        wallaby.start();
-      })
-      .catch(function (e) {
-        setTimeout(function () {
-          throw e;
-        }, 0);
+      System.config({
+        packageWithIndex: true // sadly, we can't use umd packages (yet?)
       });
 
-      //////////////////////////
-      // SystemJS configuration.
-      function systemConfig() {
+      System.import('systemjs.config.js')
+        .then(function () {
+          return Promise.all([
+            System.import('@angular/core/testing'),
+            System.import('@angular/platform-browser-dynamic/testing')
+          ])
+        })
+        .then(function (providers) {
+          var testing = providers[0];
+          var testingBrowser = providers[1];
 
-        // map tells the System loader where to look for things
-        var map = {
-          'app':                        'app',
+          testing.setBaseTestProviders(
+            testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
+            testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
 
-          '@angular':                   'node_modules/@angular',
-          'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
-          'rxjs':                       'node_modules/rxjs'
-        };
-
-        // packages tells the System loader how to load when no filename and/or no extension
-        var packages = {
-          'app':                        { main: 'main.js',  defaultExtension: 'js' },
-          'rxjs':                       { defaultExtension: 'js' },
-          'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
-        };
-
-        var ngPackageNames = [
-          'common',
-          'compiler',
-          'core',
-          'http',
-          'platform-browser',
-          'platform-browser-dynamic',
-          'router',
-          'router-deprecated',
-          'upgrade',
-        ];
-
-        // Add package entries for angular packages
-        ngPackageNames.forEach(function(pkgName) {
-
-          // Bundled (~40 requests):  DOESN'T WORK IN WALLABY OR KARMA (YET?)
-          // packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
-
-          // Individual files (~300 requests):
-          packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
+          // Load all spec files
+          return Promise.all(wallaby.tests.map(function (specFile) {
+            return System.import(specFile);
+          }));
+        })
+        .then(function () {
+          wallaby.start();
+        })
+        .catch(function (e) {
+          setTimeout(function () {
+            throw e;
+          }, 0);
         });
-
-        var config = {
-          map: map,
-          packages: packages
-        }
-
-        System.config(config);
-      }
-      //////////////////
     }
   };
-
 };
diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json
index 618e1867ec..0e58f8680c 100644
--- a/public/docs/_examples/webpack/ts/package.webpack.json
+++ b/public/docs/_examples/webpack/ts/package.webpack.json
@@ -41,7 +41,7 @@
     "style-loader": "^0.13.1",
     "ts-loader": "^0.8.1",
     "typescript": "^1.8.9",
-    "typings": "^0.7.12",
+    "typings": "^1.0.4",
     "webpack": "^1.12.14",
     "webpack-dev-server": "^1.14.1",
     "webpack-merge": "^0.9.0"
diff --git a/public/docs/_examples/webpack/ts/typings.1.json b/public/docs/_examples/webpack/ts/typings.1.json
index ab3d27d712..7e0e18568d 100644
--- a/public/docs/_examples/webpack/ts/typings.1.json
+++ b/public/docs/_examples/webpack/ts/typings.1.json
@@ -1,7 +1,7 @@
 {
-  "ambientDependencies": {
+  "globalDependencies": {
     "core-js": "registry:dt/core-js#0.0.0+20160317120654",
-    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
+    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
     "node": "registry:dt/node#4.0.0+20160509154515"
   }
 }
diff --git a/public/docs/_includes/styleguide/_code-examples.jade b/public/docs/_includes/styleguide/_code-examples.jade
index 47dbb56c1b..102b7694c1 100644
--- a/public/docs/_includes/styleguide/_code-examples.jade
+++ b/public/docs/_includes/styleguide/_code-examples.jade
@@ -113,11 +113,9 @@ include ../../../_includes/_util-fns
       var AppComponent = ng
           // #docregion component
           .Component({
-            selector: 'my-app'
-          })
+            selector: 'my-app',
           // #enddocregion component
           // #docregion view
-          .View({
             template: '<h1 id="output">My First Angular 2 App</h1>'
           })
           // #enddocregion view
@@ -139,13 +137,13 @@ include ../../../_includes/_util-fns
       // #docplaster more code here
 
       // #docregion import,twoparts
-      import {Component, View, bootstrap} from 'angular2/angular2';
+      import { Component } from '@angular/core';
+      import { bootstrap } from '@angular/platform-browser-dynamic';
+
       // #enddocregion twoparts,  import
       @Component({
-      selector: 'my-app'
-      })
-      @View({
-      template: '<h1 id="output">My first Angular 2 App</h1>'
+        selector: 'my-app',
+        template: '<h1 id="output">My first Angular 2 App</h1>'
       })
       class AppComponent {
       }
diff --git a/public/docs/js/latest/cheatsheet.jade b/public/docs/js/latest/cheatsheet.jade
index 694e02b0d2..c623d14bcd 100644
--- a/public/docs/js/latest/cheatsheet.jade
+++ b/public/docs/js/latest/cheatsheet.jade
@@ -1,6 +1,4 @@
 - var base = current.path[4] ? '.' : './guide';
-.banner.grid-fluid
-  p.text-body.c10 This cheat sheet is provisional and may change. Angular 2 is currently in Beta.
 
 article(class="l-content-small grid-fluid docs-content")
   .cheatsheet
diff --git a/public/docs/ts/latest/cookbook/component-relative-paths.jade b/public/docs/ts/latest/cookbook/component-relative-paths.jade
index 66f90c1ffd..814e790e58 100644
--- a/public/docs/ts/latest/cookbook/component-relative-paths.jade
+++ b/public/docs/ts/latest/cookbook/component-relative-paths.jade
@@ -3,7 +3,7 @@ include ../_util-fns
 :marked
   ## Write *Component-Relative* URLs to component templates and style files
 
-  Our components ofter refer to external template and style files.
+  Our components often refer to external template and style files.
   We identify those files with a URL in the `templateUrl` and `styleUrls` properties of the `@Component` metadata
   as seen here:
   
@@ -12,7 +12,7 @@ include ../_util-fns
   By default, we *must* specify the full path back to the application root.
   We call this an ***absolute path*** because it is *absolute* with respect to the application root.
 
-  There are two problems with an *absolute path*
+  There are two problems with an *absolute path*:
   
   1. We have to remember the full path back to the application root.
   
diff --git a/public/docs/ts/latest/cookbook/dependency-injection.jade b/public/docs/ts/latest/cookbook/dependency-injection.jade
index 0521de5d60..f80528c08d 100644
--- a/public/docs/ts/latest/cookbook/dependency-injection.jade
+++ b/public/docs/ts/latest/cookbook/dependency-injection.jade
@@ -63,7 +63,11 @@ include ../_util-fns
   * [useFactory - the *factory provider*](#usefactory)  
   
   * [useFactory - *工厂供应商*](#usefactory)  
+  
+  [Define providers with object literals](#object-literals)
 
+  [使用对象文本定义供应商] (#object-literals)
+  
   [Provider token alternatives](#tokens)
   
   [供应商可选令牌](#tokens)
@@ -929,6 +933,23 @@ a(id='usefactory')
       
     该函数从`HeroService`获取英雄参赛者，从中取`2`个作为亚军，并把他们的名字拼接起来。请到[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)查看全部原代码。
 
+<a id="object-literals"></a>
+.l-main-section
+:marked
+  ## Define providers with object literals
+  
+  ## 使用对象文本定义供应商
+
+:marked
+  In the previous section we learned to use the `provide` method to customize how dependencies are created. 
+  
+  Instead of calling the `provide` function, we can configure providers with _object literals_. 
+  It's a slightly more concise syntax and we don't have to import the `provide` function.
+  
+  Here's a set of providers that we saw earlier, re-written with object literals.
+
++makeExample('cb-dependency-injection/ts/app/hero-of-the-month-literals.component.ts','providers-using-object-literals')(format='.')  
+
 a(id="tokens")
 .l-main-section
 :marked
diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade
index c5a32936f7..8580a4c9f9 100644
--- a/public/docs/ts/latest/guide/dependency-injection.jade
+++ b/public/docs/ts/latest/guide/dependency-injection.jade
@@ -915,18 +915,26 @@ code-example(format, language="html").
 // #docregion providers-provide-3
 // Skip for Dart, where the provide() function won't pass type checking.
 :marked
-  The [provide](../api/core/provide-function.html) function is the more common, friendlier way to create a `Provider`:
+  The [provide](../api/core/provide-function.html) function is the typical way to create a `Provider`:
+  
+  [provide](../api/core/provide-function.html)函数是典型的用来创建`Provider`的方法:
   
-  [provide](../api/core/provide-function.html)函数是创建`Provider`的更通用、友好的方式。
 // #enddocregion providers-provide-3
 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-3')
 // #docregion providers-provide-4-1
 // Modified for Dart.
+
 :marked
-  In both approaches &mdash; `Provider` class and `provide` function &mdash;
-  we supply two arguments.
+ Or we can declare a provider in an _object literal_ and skip the `provide` function.
   
-  在这两种方式里——在`Provider`类和`provide`函数中——我们提供了两个参数。
+ 或者我们可以在一个_对象文本_声明一个提供商，并忽略`provide`函数。
+
++makeExample('dependency-injection/ts/app/providers.component.ts','providers-3a')
+
+:marked
+  Pick the syntax that you prefer. They all do the same thing.
+  
+  In each syntax, we supply two types of values.
 // #enddocregion providers-provide-4-1
 // #docregion providers-provide-4-2
 :marked
@@ -945,6 +953,7 @@ code-example(format, language="html").
   第二个是一个供应商定义对象。
   我们可以把它看做一个指导如何创建依赖值的*配方*。
   有很多方式创建依赖值…… 也有很多方式可以写配方。
+  
 // #docregion providers-alternative-1
 :marked
   <a id="class-provider"></a>
@@ -974,7 +983,7 @@ code-example(format, language="html").
   这个日志服务从一个注入进来的`UserService`中取得用户，`UserService`通常也会在应用级被注入。
   
 // #enddocregion providers-alternative-2
-+makeExample('dependency-injection/ts/app/providers.component.ts','EvenBetterLogger')
++makeExample('dependency-injection/ts/app/providers.component.ts','EvenBetterLogger')(format='.')
 // #docregion providers-alternative-3
 :marked
   Configure it like we did `BetterLogger`.
diff --git a/public/docs/ts/latest/guide/npm-packages.jade b/public/docs/ts/latest/guide/npm-packages.jade
index 4997eafd28..fa7b402a26 100644
--- a/public/docs/ts/latest/guide/npm-packages.jade
+++ b/public/docs/ts/latest/guide/npm-packages.jade
@@ -5,9 +5,17 @@ include ../_util-fns
   These packages are maintained and installed with the Node Package Manager (<a href="https://docs.npmjs.com/" target="_blank">npm</a>).
 .l-sub-section
   :marked
-    Don't have npm?
-    <a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">Get it now</a>
-    because we're going to use it now and repeatedly throughout this documentation.
+    Node.js and npm are essential to Angular 2 development. 
+    
+    <a href="https://docs.npmjs.com/getting-started/installing-node" target="_blank" title="Installing Node.js and updating npm">
+    Get it now</a> if it's not already installed on your machine
+ 
+    **Verify that you are running node `v5.x.x` and npm `3.x.x`**
+    by running `node -v` and `npm -v` in a terminal/console window.
+    Older and newer versions produce errors.
+
+    We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm.
+
 :marked
   We recommend a comprehensive starter-set of packages as specified in the `dependencies` and `devDependencies`
   sections of the QuickStart
diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade
index 3d7b567924..dcd58e4278 100644
--- a/public/docs/ts/latest/guide/style-guide.jade
+++ b/public/docs/ts/latest/guide/style-guide.jade
@@ -315,9 +315,10 @@ a(href="#toc") 回到顶部
 
 .s-rule.do
   :marked
-    **Do** use dashes to separate words.
+    **Do** use dashes to separate words in the descriptive name.
+    
+    **坚持** 在描述性名字里面，使用横杠来分隔单词。
     
-    **坚持**使用横杠来分隔单词。
 
 .s-rule.do
   :marked
@@ -327,27 +328,40 @@ a(href="#toc") 回到顶部
 
 .s-rule.do
   :marked
-    **Do** use consistent names for all components following a pattern that describes the component's feature then its type. A recommended pattern is `feature.type.ts`.
+    **Do** use consistent type names for all components following a pattern that describes the component's feature then its type. A recommended pattern is `feature.type.ts`.
+    
+    **坚持**对所有组件使用一致的类型命名规则，遵循这个模式：先描述组件的特性，再描述它的类型。推荐的模式为`feature.type.ts`。
     
-    **坚持**对所有组件使用一致的命名规则，遵循这个模式：先描述组件的特性，再描述它的类型。推荐的模式为`feature.type.ts`。
 
 .s-rule.do
   :marked
-    **Do** use conventional suffixes for the types including `*.service.ts`, `*.component.ts`, `*.pipe.ts`. Invent other suffixes where desired, but take care in having too many.
+    **Do** use conventional type names including `.service`, `.component`, `.pipe`. 
+    Invent additional type names if you must but take care not to create too many.
+        
+    **坚持**使用惯用的后缀来描述类型，比如`*.service`、`*.component`、`*.pipe`。
+    创建额外的类型名字，但你必须注意不要创建太多。
     
-    **坚持**使用惯用的后缀来描述类型，比如`*.service.ts`、`*.component.ts`、`*.pipe.ts`。如果你愿意，也可以发明其它后缀，但注意不要太多。
 
 .s-why
   :marked
-    **Why?** Provides a consistent way to quickly identify what is in the file.
+    **Why?** Type names provide a consistent way to quickly identify what is in the file.
+    
+    **为何？**类型名字提供一致的方法来快速的识别文件是什么。
     
-    **为何？**提供一致的方法来快速的识别文件是什么。
 
 .s-why
   :marked
-    **Why?** Provides a consistent way to quickly find a specific file using an editor or IDE's fuzzy search techniques.
+    **Why?** Make it easy to find a specific file type using an editor or IDE's fuzzy search techniques.
     
-    **为何？**提供一致的方法，利用编辑器或者IDE的模糊搜索功能，快速找到特定文件。
+    **为何？** 可以让我们利用编辑器或者IDE的模糊搜索功能，很容易的找到特定文件。   
+
+.s-why
+  :marked
+    **Why?** Unabbreviated type names such as `.service` are descriptive and unambiguous.
+    Abbreviations such as `.srv`, `.svc`, and `.serv` can be confusing.
+    
+    **为何？** 没有被简写的类型名字比如`.service`很有描述性，不含糊。
+    简写可能造成混淆，比如`.srv`, `.svc`, 和 `.serv`。
 
 .s-why.s-why-last
   :marked
@@ -1054,10 +1068,10 @@ a(href="#toc") 回到顶部
     
     **为何？**TypeScript工具让识别私有或公有属性和方法变得很简单。
 
-+makeExample('style-guide/ts/03-04/app/shared/toast/toast.service.avoid.ts', 'example', 'app/shared/toast/toast.service.ts')(avoid=1)
++makeExample('style-guide/ts/03-04/app/shared/toast.service.avoid.ts', 'example', 'app/shared/toast.service.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/03-04/app/shared/toast/toast.service.ts', 'example', 'app/shared/toast/toast.service.ts')
++makeExample('style-guide/ts/03-04/app/shared/toast.service.ts', 'example', 'app/shared/toast.service.ts')
 :marked
 
 a(href="#toc") Back to top
@@ -1959,7 +1973,7 @@ a(href="#toc") 回到顶部
 +makeExample('style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts', 'example', 'app/heroes/hero-button/hero-button.component.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.html', '', 'app/heroes/hero-button/hero-button.component.html')(avoid=1)
++makeExample('style-guide/ts/05-03/app/app.component.avoid.html', '', 'app/app.component.html')(avoid=1)
 :marked
 
 +makeTabs(
diff --git a/public/docs/ts/latest/guide/typescript-configuration.jade b/public/docs/ts/latest/guide/typescript-configuration.jade
index affa2b2928..ac4705a272 100644
--- a/public/docs/ts/latest/guide/typescript-configuration.jade
+++ b/public/docs/ts/latest/guide/typescript-configuration.jade
@@ -76,7 +76,7 @@ a(id="typings")
   
   Many libraries include their definition files in their npm packages where both the TypeScript compiler and editors
   can find them. Angular is one such library. 
-  Peek into the `node_modules/angular2/` folder of any Angular application to see several `...d.ts` files that describe parts of Angular.
+  Peek into the `node_modules/@angular/core/` folder of any Angular application to see several `...d.ts` files that describe parts of Angular.
   
   **We need do nothing to get *typings* files for library packages which include *d.ts* files &mdash; as all Angular packages do.**
   
@@ -118,10 +118,10 @@ code-example(format="").
 code-example(format="").
   npm run typings list
 :marked
-  The following command installs the typings file for the Jasmine test library and updates the `typings.config` 
-  so we that we get it automatically the next time.
+  The following command installs or updates the typings file for the Jasmine test library from the *DefinitelyTyped* repository
+  and updates the `typings.config` so we that we get it automatically the next time we install typings.
 code-example(format="").
-  npm run typings -- install jasmine --ambient --save
+  npm run typings -- install dt~jasmine --save --global
 .l-sub-section
   :marked
     The [&ndash;&ndash; option](https://docs.npmjs.com/cli/run-script) is important; 
@@ -129,43 +129,3 @@ code-example(format="").
     
     Learn about the features of the *typings* tool at its [site on github](https://github.com/typings/typings/blob/master/README.md).
 
-:marked
-  ### Typing file collisions
-  
-  The TypeScript compiler does not tolerate redefinition of a type. For example, it throws an error if it's given two definitions for
-  the `Promise` type.
-  
-  Double definitions are common. In fact, the `typings` tool deliberately creates
-  duplicate sets of typings (for reasons best explained elsewhere). 
-  Look in the project structure for the *typings folder* where we should find something like:
-.filetree
-  .file typings
-  .children
-    .file browser
-    .children
-      .file ambient
-        .children
-          .file core-js
-          .children
-            .file index.d.ts
-          .file ...
-
-  .children
-    .file main
-    .children
-      .file ambient
-        .children
-          .file core-js
-          .children
-            .file index.d.ts
-          .file ...            
-  .children
-     .file browser.d.ts
-     .file main.d.ts
-:marked
-  The `core-js` typings are duplicated and the `browser.d.ts` and `main.d.ts` have overlapping content.
-  
-  We must tell the compiler to ignore one or the other. 
-  We removed the `main` set from consideration in the `exclude` section of our `tsconfig.json` file:
-+makeJson('quickstart/ts/tsconfig.1.json', {paths: 'exclude'}, 'tsconfig.json (exclude)')(format=".")
-:marked
diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade
index 95ee9314b9..a58d298998 100644
--- a/public/docs/ts/latest/guide/upgrade.jade
+++ b/public/docs/ts/latest/guide/upgrade.jade
@@ -864,12 +864,12 @@ code-example(format="").
   project, which contains metadata about the type definitions we've installed:
   
 code-example(format="").
-  npm run typings install jquery -- --save --ambient
-  npm run typings install angular -- --save --ambient
-  npm run typings install angular-route -- --save --ambient
-  npm run typings install angular-resource -- --save --ambient
-  npm run typings install angular-mocks -- --save --ambient
-  npm run typings install jasmine -- --save --ambient
+  npm run typings install jquery -- --save --global
+  npm run typings install angular -- --save --global
+  npm run typings install angular-route -- --save --global
+  npm run typings install angular-resource -- --save --global
+  npm run typings install angular-mocks -- --save --global
+  npm run typings install jasmine -- --save --global
 
 :marked
   In `index.html`, let's now enable SystemJS. Add a couple of `<script>` tags that
@@ -1919,11 +1919,11 @@ table
   we still need are for Jasmine.
 
 code-example(format="").
-  npm run typings uninstall jquery -- --save --ambient
-  npm run typings uninstall angular -- --save --ambient
-  npm run typings uninstall angular-route -- --save --ambient
-  npm run typings uninstall angular-resource -- --save --ambient
-  npm run typings uninstall angular-mocks -- --save --ambient
+  npm run typings uninstall jquery -- --save --global
+  npm run typings uninstall angular -- --save --global
+  npm run typings uninstall angular-route -- --save --global
+  npm run typings uninstall angular-resource -- --save --global
+  npm run typings uninstall angular-mocks -- --save --global
 
 :marked
   Finally, from `index.html` and `karma.conf.js`, remove all references to
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 00b2140d9f..039efc1efb 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -77,6 +77,15 @@ block setup-tooling
     if they are not already on your machine.
     
     如果你的机器上还没有**[Node.js®和npm](https://nodejs.org/en/download/)**，请安装它们。
+  .l-sub-section
+    :marked
+      **Verify that you are running node `v5.x.x` and npm `3.x.x`**
+      by running `node -v` and `npm -v` in a terminal/console window.
+      Older and newer versions produce errors.
+      
+      **在终端窗口运行`node -v`和`npm -v`，来确认你的node版本为`v5.x.x`，npm版本为`3.x.x`**。
+      老版本和新版本会出错。
+      
 
 block download-source
   .l-main-section
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
index fd994476a1..2eff1e6aa7 100644
--- a/public/docs/ts/latest/tutorial/toh-pt6.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -201,7 +201,7 @@ code-example(format="." language="bash").
 :marked
   ### Save
 
-  We combine the call to the private `_post` and `_put` methods in a single `save` method. This simplifies the public api and makes the integration with `HeroDetailComponent` easier. `HeroService` determines which method to call based on the state of the `hero` object. If the hero already has an id we know it's an edit. Otherwise we know it's an add.
+  We combine the call to the private `post` and `put` methods in a single `save` method. This simplifies the public api and makes the integration with `HeroDetailComponent` easier. `HeroService` determines which method to call based on the state of the `hero` object. If the hero already has an id we know it's an edit. Otherwise we know it's an add.
 
 +makeExample('toh-6/ts/app/hero.service.ts', 'save', 'app/hero.service.ts (save hero)')(format=".")
     
@@ -220,19 +220,24 @@ code-example(format="." language="bash").
   ### Add/Edit in the *HeroDetailComponent*
   We already have `HeroDetailComponent` for viewing details about a specific hero. Add and Edit are natural extensions of the detail view, so we are able to reuse `DetailHeroComponent` with a few tweaks. The original component was created to render existing data, but to add new data we have to initialize the `hero` property to an empty `Hero` object.
   
-+makeExample('toh-6/ts/app/hero-detail.component.ts', 'ngOnInit', 'app/hero-detail.component.ts (ngOnInit)')(format=".")     
++makeExample('toh-6/ts/app/hero-detail.component.ts', 'ngOnInit', 'app/hero-detail.component.ts (ngOnInit)')(format=".")
 
 :marked
   In order to differentiate between add and edit we are adding a check to see if an id is passed in the url. If the id is absent we bind `HeroDetailComponent` to an empty `Hero` object. In either case, any edits made through the UI will be bound back to the same `hero` property.
 
   The next step is to add a save method to `HeroDetailComponent` and call the corresponding save method in `HeroesService`.
   
-+makeExample('toh-6/ts/app/hero-detail.component.ts', 'save', 'app/hero-detail.component.ts (save)')(format=".")  
++makeExample('toh-6/ts/app/hero-detail.component.ts', 'save', 'app/hero-detail.component.ts (save)')(format=".")
 
 :marked
   The same save method is used for both add and edit since `HeroService` will know when to call `post` vs `put` based on the state of the `Hero` object.
   
-  Earlier we used the `save()` method to return a promise, so when the promise resolves, we call `emit` to notify `HeroesComponent` that we just added or modified a hero. `HeroesComponent` is listening for this notification and will automatically refresh the list of heroes to include our recent updates.     
+  After we save a hero, we redirect the browser back to the to the previous page using the `goBack()` method.
+  
++makeExample('toh-6/ts/app/hero-detail.component.ts', 'goback', 'app/hero-detail.component.ts (goBack)')(format=".")
+
+:marked
+  Here we call `emit` to notify that we just added or modified a hero. `HeroesComponent` is listening for this notification and will automatically refresh the list of heroes to include our recent updates.
 
 .l-sub-section
   :marked
@@ -242,7 +247,7 @@ code-example(format="." language="bash").
   Here is `HeroDetailComponent` with its new save button.
   
 figure.image-display
-  img(src='/resources/images/devguide/toh/hero-details-save-button.png' alt="Hero Details With Save Button") 
+  img(src='/resources/images/devguide/toh/hero-details-save-button.png' alt="Hero Details With Save Button")
 
 :marked
   ### Add/Delete in the *HeroesComponent*
@@ -254,12 +259,12 @@ figure.image-display
   As we noted above, that is the component's cue to create and present an empty hero.
   
   Add the following HTML to the `heroes.component.html`, just below the hero list (the `*ngFor`).
-+makeExample('toh-6/ts/app/heroes.component.html', 'add-hero', 'app/heroes.component.ts (add)')(format=".")  
++makeExample('toh-6/ts/app/heroes.component.html', 'add-hero', 'app/heroes.component.ts (add)')(format=".")
 :marked
   The user can *delete* an existing hero by clicking a delete button next to the hero's name.
   
   Add the following HTML to the `heroes.component.html` right after the name in the repeated `<li>` tag:
-+makeExample('toh-6/ts/app/heroes.component.html', 'delete-hero', 'app/heroes.component.ts (delete)')(format=".")  
++makeExample('toh-6/ts/app/heroes.component.html', 'delete-hero', 'app/heroes.component.ts (delete)')(format=".")
 
 :marked
   Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions in the template.