diff --git a/public/docs/_examples/architecture/ts/index.html b/public/docs/_examples/architecture/ts/index.html
index e9026e0ffc..e365c39f02 100644
--- a/public/docs/_examples/architecture/ts/index.html
+++ b/public/docs/_examples/architecture/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/attribute-directives/ts/index.html b/public/docs/_examples/attribute-directives/ts/index.html
index 6988ae496a..197f1a8280 100644
--- a/public/docs/_examples/attribute-directives/ts/index.html
+++ b/public/docs/_examples/attribute-directives/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html b/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
index f6c564313f..ee2eb6fdec 100644
--- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
+++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/index.html
@@ -10,7 +10,7 @@
     <!-- #enddocregion style -->
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/cb-component-communication/ts/index.html b/public/docs/_examples/cb-component-communication/ts/index.html
index 20c75e04a5..51adcdaf23 100644
--- a/public/docs/_examples/cb-component-communication/ts/index.html
+++ b/public/docs/_examples/cb-component-communication/ts/index.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="demo.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/cb-dependency-injection/ts/index.html b/public/docs/_examples/cb-dependency-injection/ts/index.html
index 744fd81a26..ba1d2761e1 100644
--- a/public/docs/_examples/cb-dependency-injection/ts/index.html
+++ b/public/docs/_examples/cb-dependency-injection/ts/index.html
@@ -11,7 +11,7 @@
     <!-- #enddocregion style -->
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/cb-dynamic-form/ts/index.html b/public/docs/_examples/cb-dynamic-form/ts/index.html
index 33998c478e..ec3e1cbbb2 100644
--- a/public/docs/_examples/cb-dynamic-form/ts/index.html
+++ b/public/docs/_examples/cb-dynamic-form/ts/index.html
@@ -11,7 +11,7 @@
     <!-- #enddocregion style -->
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/cb-set-document-title/ts/index.html b/public/docs/_examples/cb-set-document-title/ts/index.html
index f5289d7eb3..8f1ad96812 100644
--- a/public/docs/_examples/cb-set-document-title/ts/index.html
+++ b/public/docs/_examples/cb-set-document-title/ts/index.html
@@ -15,7 +15,7 @@
   <!-- #enddocregion style -->
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/cb-ts-to-js/js/index.html b/public/docs/_examples/cb-ts-to-js/js/index.html
index fb9d760584..b1c1449fb2 100644
--- a/public/docs/_examples/cb-ts-to-js/js/index.html
+++ b/public/docs/_examples/cb-ts-to-js/js/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/cb-ts-to-js/ts/index.html b/public/docs/_examples/cb-ts-to-js/ts/index.html
index 80fa73d326..005fe67c31 100644
--- a/public/docs/_examples/cb-ts-to-js/ts/index.html
+++ b/public/docs/_examples/cb-ts-to-js/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/component-styles/ts/index.html b/public/docs/_examples/component-styles/ts/index.html
index 45dd7c73ff..9345f5b221 100644
--- a/public/docs/_examples/component-styles/ts/index.html
+++ b/public/docs/_examples/component-styles/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/dependency-injection/ts/index.html b/public/docs/_examples/dependency-injection/ts/index.html
index 74708a8852..74f8ed8894 100644
--- a/public/docs/_examples/dependency-injection/ts/index.html
+++ b/public/docs/_examples/dependency-injection/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/displaying-data/ts/index.html b/public/docs/_examples/displaying-data/ts/index.html
index 7b96075c09..e74be1c5de 100644
--- a/public/docs/_examples/displaying-data/ts/index.html
+++ b/public/docs/_examples/displaying-data/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/forms/js/index.html b/public/docs/_examples/forms/js/index.html
index e214ee3ac1..55b7d2ba1d 100644
--- a/public/docs/_examples/forms/js/index.html
+++ b/public/docs/_examples/forms/js/index.html
@@ -15,7 +15,7 @@
     <!-- #enddocregion styles -->
 
    <!-- IE required polyfill -->
-   <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+   <script src="node_modules/core-js/client/shim.min.js"></script>
 
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/forms/ts/index.html b/public/docs/_examples/forms/ts/index.html
index ac457e8f82..4df2d32d46 100644
--- a/public/docs/_examples/forms/ts/index.html
+++ b/public/docs/_examples/forms/ts/index.html
@@ -15,7 +15,7 @@
      <!-- #enddocregion styles -->
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
index a4109a1625..91d2dc8894 100644
--- a/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
+++ b/public/docs/_examples/hierarchical-dependency-injection/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/homepage-hello-world/ts/index.1.html b/public/docs/_examples/homepage-hello-world/ts/index.1.html
index f5b05c3e55..ce0bdfbaf9 100644
--- a/public/docs/_examples/homepage-hello-world/ts/index.1.html
+++ b/public/docs/_examples/homepage-hello-world/ts/index.1.html
@@ -9,17 +9,17 @@
 
     <!-- 1. Load libraries -->
      <!-- Polyfill(s) for older browsers -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
+    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
 
     <script src="https://npmcdn.com/zone.js@0.6.12"></script>
     <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
+    <script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
     <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err);  });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
 
   </head>
diff --git a/public/docs/_examples/homepage-hello-world/ts/index.html b/public/docs/_examples/homepage-hello-world/ts/index.html
index 246cecc85d..794935d3bb 100644
--- a/public/docs/_examples/homepage-hello-world/ts/index.html
+++ b/public/docs/_examples/homepage-hello-world/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/homepage-tabs/ts/index.1.html b/public/docs/_examples/homepage-tabs/ts/index.1.html
index 6a9ab2f9dd..c790439682 100644
--- a/public/docs/_examples/homepage-tabs/ts/index.1.html
+++ b/public/docs/_examples/homepage-tabs/ts/index.1.html
@@ -10,17 +10,17 @@
 
     <!-- 1. Load libraries -->
      <!-- Polyfill(s) for older browsers -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
+    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
 
     <script src="https://npmcdn.com/zone.js@0.6.12"></script>
     <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
+    <script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
     <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err);  });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
 
   </head>
diff --git a/public/docs/_examples/homepage-tabs/ts/index.html b/public/docs/_examples/homepage-tabs/ts/index.html
index 9abb036d3a..1fe2ebc8ba 100644
--- a/public/docs/_examples/homepage-tabs/ts/index.html
+++ b/public/docs/_examples/homepage-tabs/ts/index.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/homepage-todo/ts/index.1.html b/public/docs/_examples/homepage-todo/ts/index.1.html
index f69158e29c..d926bbe323 100644
--- a/public/docs/_examples/homepage-todo/ts/index.1.html
+++ b/public/docs/_examples/homepage-todo/ts/index.1.html
@@ -10,17 +10,17 @@
 
     <!-- 1. Load libraries -->
      <!-- Polyfill(s) for older browsers -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
+    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
 
     <script src="https://npmcdn.com/zone.js@0.6.12"></script>
     <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
+    <script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
     <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err);  });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
 
   </head>
diff --git a/public/docs/_examples/homepage-todo/ts/index.html b/public/docs/_examples/homepage-todo/ts/index.html
index 738fed01b9..2bddce017c 100644
--- a/public/docs/_examples/homepage-todo/ts/index.html
+++ b/public/docs/_examples/homepage-todo/ts/index.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/karma.conf.js b/public/docs/_examples/karma.conf.js
index fe7c2d1652..b9bea32636 100644
--- a/public/docs/_examples/karma.conf.js
+++ b/public/docs/_examples/karma.conf.js
@@ -22,7 +22,7 @@ module.exports = function(config) {
     },
     files: [
       // Polyfills.
-      'node_modules/es6-shim/es6-shim.js',
+      'node_modules/code-js/client/shim.min.js',
 
       // Zone.js dependencies
       // Note - do not include zone.js itself here, it is already
diff --git a/public/docs/_examples/lifecycle-hooks/ts/index.html b/public/docs/_examples/lifecycle-hooks/ts/index.html
index 41ad4848b0..6fa866c6e6 100644
--- a/public/docs/_examples/lifecycle-hooks/ts/index.html
+++ b/public/docs/_examples/lifecycle-hooks/ts/index.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="sample.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index fa3fa42886..b89d74462e 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -31,12 +31,14 @@
     "@angular/router": "2.0.0-rc.1",
     "@angular/router-deprecated": "2.0.0-rc.1",
     "@angular/upgrade": "2.0.0-rc.1",
+
     "systemjs": "0.19.27",
-    "es6-shim": "^0.35.0",
+    "core-js": "^2.4.0",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12",
-    "angular2-in-memory-web-api": "0.0.7",
+
+    "angular2-in-memory-web-api": "0.0.9",
     "bootstrap": "^3.3.6"
   },
   "devDependencies": {
diff --git a/public/docs/_examples/pipes/ts/index.html b/public/docs/_examples/pipes/ts/index.html
index 445a3d9c1f..0b1a46f328 100644
--- a/public/docs/_examples/pipes/ts/index.html
+++ b/public/docs/_examples/pipes/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/quickstart/js/index.html b/public/docs/_examples/quickstart/js/index.html
index 0f9088eaf3..bec42f9dea 100644
--- a/public/docs/_examples/quickstart/js/index.html
+++ b/public/docs/_examples/quickstart/js/index.html
@@ -10,7 +10,7 @@
     <!-- #docregion libraries -->
     <!-- #docregion ie-polyfills -->
     <!-- IE required polyfill -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
     <!-- #enddocregion ie-polyfills -->
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json
index e5e96f785e..776835efa8 100644
--- a/public/docs/_examples/quickstart/js/package.1.json
+++ b/public/docs/_examples/quickstart/js/package.1.json
@@ -17,11 +17,12 @@
     "@angular/router-deprecated":  "2.0.0-rc.1",
     "@angular/upgrade":  "2.0.0-rc.1",
 
+    "core-js": "^2.4.0",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12",
 
-    "angular2-in-memory-web-api": "0.0.7",
+    "angular2-in-memory-web-api": "0.0.9",
     "bootstrap": "^3.3.6"
   },
   "devDependencies": {
diff --git a/public/docs/_examples/quickstart/ts/index.html b/public/docs/_examples/quickstart/ts/index.html
index b1be60a776..a0a64d1122 100644
--- a/public/docs/_examples/quickstart/ts/index.html
+++ b/public/docs/_examples/quickstart/ts/index.html
@@ -11,7 +11,7 @@
     <!-- #docregion libraries -->
     <!-- #docregion ie-polyfills -->
      <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
     <!-- #enddocregion ie-polyfills -->
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json
index 8be1e8b8c6..5cac25cd60 100644
--- a/public/docs/_examples/quickstart/ts/package.1.json
+++ b/public/docs/_examples/quickstart/ts/package.1.json
@@ -22,12 +22,12 @@
     "@angular/upgrade":  "2.0.0-rc.1",
 
     "systemjs": "0.19.27",
-    "es6-shim": "^0.35.0",
+    "core-js": "^2.4.0",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.12",
 
-    "angular2-in-memory-web-api": "0.0.7",
+    "angular2-in-memory-web-api": "0.0.9",
     "bootstrap": "^3.3.6"
   },
   "devDependencies": {
diff --git a/public/docs/_examples/quickstart/ts/systemjs.config.1.js b/public/docs/_examples/quickstart/ts/systemjs.config.1.js
index 8cdeb99cb5..6f23f1dade 100644
--- a/public/docs/_examples/quickstart/ts/systemjs.config.1.js
+++ b/public/docs/_examples/quickstart/ts/systemjs.config.1.js
@@ -1,3 +1,4 @@
+// #docregion
 /**
  * System configuration for Angular 2 samples
  * Adjust as necessary for your application needs.
diff --git a/public/docs/_examples/quickstart/ts/typings.1.json b/public/docs/_examples/quickstart/ts/typings.1.json
index b5324f4199..ab3d27d712 100644
--- a/public/docs/_examples/quickstart/ts/typings.1.json
+++ b/public/docs/_examples/quickstart/ts/typings.1.json
@@ -1,6 +1,6 @@
 {
   "ambientDependencies": {
-    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
+    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
     "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
     "node": "registry:dt/node#4.0.0+20160509154515"
   }
diff --git a/public/docs/_examples/router-deprecated/ts/index.1.html b/public/docs/_examples/router-deprecated/ts/index.1.html
index 7a58c4ec50..53a6d4832f 100644
--- a/public/docs/_examples/router-deprecated/ts/index.1.html
+++ b/public/docs/_examples/router-deprecated/ts/index.1.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router-deprecated/ts/index.2.html b/public/docs/_examples/router-deprecated/ts/index.2.html
index 83c06e1af6..d71bd929cb 100644
--- a/public/docs/_examples/router-deprecated/ts/index.2.html
+++ b/public/docs/_examples/router-deprecated/ts/index.2.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router-deprecated/ts/index.3.html b/public/docs/_examples/router-deprecated/ts/index.3.html
index 2a5fc893ae..abbb771beb 100644
--- a/public/docs/_examples/router-deprecated/ts/index.3.html
+++ b/public/docs/_examples/router-deprecated/ts/index.3.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router-deprecated/ts/index.html b/public/docs/_examples/router-deprecated/ts/index.html
index 9ac268d05f..35a6ddfc73 100644
--- a/public/docs/_examples/router-deprecated/ts/index.html
+++ b/public/docs/_examples/router-deprecated/ts/index.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router/ts/index.1.html b/public/docs/_examples/router/ts/index.1.html
index 6bc706e2e6..c04b769a2c 100644
--- a/public/docs/_examples/router/ts/index.1.html
+++ b/public/docs/_examples/router/ts/index.1.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router/ts/index.2.html b/public/docs/_examples/router/ts/index.2.html
index d5676ff4b5..01e521e896 100644
--- a/public/docs/_examples/router/ts/index.2.html
+++ b/public/docs/_examples/router/ts/index.2.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router/ts/index.3.html b/public/docs/_examples/router/ts/index.3.html
index 1be32f1d0d..f60cdd8163 100644
--- a/public/docs/_examples/router/ts/index.3.html
+++ b/public/docs/_examples/router/ts/index.3.html
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/router/ts/index.html b/public/docs/_examples/router/ts/index.html
index 22ee1a8172..b7b5ba9f7f 100644
--- a/public/docs/_examples/router/ts/index.html
+++ b/public/docs/_examples/router/ts/index.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/tutorial/ts/example-config.json b/public/docs/_examples/server-communication/dart/example-config.json
similarity index 100%
rename from public/docs/_examples/tutorial/ts/example-config.json
rename to public/docs/_examples/server-communication/dart/example-config.json
diff --git a/public/docs/_examples/server-communication/dart/lib/app_component.dart b/public/docs/_examples/server-communication/dart/lib/app_component.dart
new file mode 100644
index 0000000000..55c91e6e4d
--- /dev/null
+++ b/public/docs/_examples/server-communication/dart/lib/app_component.dart
@@ -0,0 +1,31 @@
+// #docplaster
+// #docregion
+import "package:angular2/core.dart" show Component;
+
+import "toh/hero_list_component.dart" show HeroListComponent;
+import "wiki/wiki_component.dart" show WikiComponent;
+import "wiki/wiki_smart_component.dart" show WikiSmartComponent;
+
+@Component(
+    selector: "my-app",
+    template: '''
+      <hero-list></hero-list>
+      <my-wiki></my-wiki>
+      <my-wiki-smart></my-wiki-smart>
+    ''',
+    // #enddocregion
+    /*
+    // #docregion http-providers
+    providers: const [
+      // in-memory web api provider
+      const Provider(BrowserClient,
+          useFactory: HttpClientBackendServiceFactory, deps: const [])],
+    // #enddocregion http-providers
+    */
+    // #docregion
+    directives: const [
+      HeroListComponent,
+      WikiComponent,
+      WikiSmartComponent
+    ])
+class AppComponent {}
diff --git a/public/docs/_examples/server-communication/dart/lib/hero_data.dart b/public/docs/_examples/server-communication/dart/lib/hero_data.dart
index 50ec0fab1d..ae0480b98d 100644
--- a/public/docs/_examples/server-communication/dart/lib/hero_data.dart
+++ b/public/docs/_examples/server-communication/dart/lib/hero_data.dart
@@ -2,7 +2,7 @@
 import 'package:http/browser_client.dart';
 import 'package:http_in_memory_web_api/http_in_memory_web_api.dart';
 
-CreateDb createDb = () => {
+CreateDb _createDb = () => {
       'heroes': [
         {"id": "1", "name": "Windstorm"},
         {"id": "2", "name": "Bombasto"},
@@ -12,4 +12,4 @@ CreateDb createDb = () => {
     };
 
 BrowserClient HttpClientBackendServiceFactory() =>
-  new HttpClientInMemoryBackendService(createDb);
+  new HttpClientInMemoryBackendService(_createDb);
diff --git a/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart b/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart
index 58fe0bb40c..23e1d6e9d7 100644
--- a/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart
+++ b/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart
@@ -9,7 +9,7 @@ import 'hero_service.dart';
 @Component(
     selector: 'hero-list',
     templateUrl: 'hero_list_component.html',
-    styles: const ['.error {color:red;}'])
+    providers: const [HeroService])
 // #docregion component
 class HeroListComponent implements OnInit {
   final HeroService _heroService;
diff --git a/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.html b/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.html
index 86e2deedd6..297ffaa6c6 100644
--- a/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.html
+++ b/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.html
@@ -1,4 +1,5 @@
 <!-- #docregion -->
+<h1>Tour of Heroes</h1>
 <h3>Heroes:</h3>
 <ul>
   <li *ngFor="let hero of heroes">
diff --git a/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart b/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart
index 1daedc2d8c..d8d602d2e7 100644
--- a/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart
+++ b/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart
@@ -15,7 +15,9 @@ class HeroService {
   // #enddocregion endpoint, http-get
   final BrowserClient _http;
 
+  // #docregion ctor
   HeroService(this._http);
+  // #enddocregion ctor
 
   // #docregion methods, error-handling, http-get
   Future<List<Hero>> getHeroes() async {
@@ -57,6 +59,7 @@ class HeroService {
 
   Exception _handleError(dynamic e) {
     // In a real world app, we might use a remote logging infrastructure
+    // We'd also dig deeper into the error to get a better message
     print(e); // log to console instead
     return new Exception('Server error; cause: $e');
   }
diff --git a/public/docs/_examples/server-communication/dart/lib/toh/toh_component.dart b/public/docs/_examples/server-communication/dart/lib/toh/toh_component.dart
deleted file mode 100644
index 9c752ed730..0000000000
--- a/public/docs/_examples/server-communication/dart/lib/toh/toh_component.dart
+++ /dev/null
@@ -1,36 +0,0 @@
-// #docplaster
-// #docregion
-import 'package:angular2/core.dart';
-import 'package:http/browser_client.dart';
-
-import 'hero_list_component.dart';
-import 'hero_service.dart';
-// #enddocregion
-// #docregion in-mem-web-api
-/* ... */
-import 'package:server_communication/hero_data.dart';
-// #docregion
-
-@Component(
-    // #enddocregion in-mem-web-api
-    selector: 'my-toh',
-    // #docregion template
-    template: '''
-      <h1>Tour of Heroes</h1>
-      <hero-list></hero-list>
-    ''',
-    // #enddocregion template
-    directives: const [HeroListComponent],
-    // #enddocregion
-    // #docregion in-mem-web-api
-    /* ... */
-    // #docregion
-    providers: const [
-      HeroService,
-      // #enddocregion
-      // in-memory web api providers
-      const Provider(BrowserClient,
-          useFactory: HttpClientBackendServiceFactory)
-    // #docregion
-    ])
-class TohComponent {}
diff --git a/public/docs/_examples/server-communication/dart/pubspec.yaml b/public/docs/_examples/server-communication/dart/pubspec.yaml
index 7d36077d67..60e431bf51 100644
--- a/public/docs/_examples/server-communication/dart/pubspec.yaml
+++ b/public/docs/_examples/server-communication/dart/pubspec.yaml
@@ -12,11 +12,15 @@ dependencies:
   jsonpadding: ^0.1.0
   stream_transformers: ^0.3.0+3
   http_in_memory_web_api: ^0.0.1
+# #docregion transformers
 transformers:
 - angular2:
-    platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
-    platform_pipes: 'package:angular2/common.dart#COMMON_PIPES'
+    platform_directives:
+    - 'package:angular2/common.dart#CORE_DIRECTIVES'
+    platform_pipes:
+    - 'package:angular2/common.dart#COMMON_PIPES'
     entry_points: 'web/main.dart'
     resolved_identifiers:
         BrowserClient: 'package:http/browser_client.dart'
 - dart_to_js_script_rewriter
+# #enddocregion transformers
diff --git a/public/docs/_examples/server-communication/dart/web/index.html b/public/docs/_examples/server-communication/dart/web/index.html
index ff2918e0bd..fc365968c2 100644
--- a/public/docs/_examples/server-communication/dart/web/index.html
+++ b/public/docs/_examples/server-communication/dart/web/index.html
@@ -6,15 +6,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="sample.css">
 
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>
   </head>
 
   <body>
-    <my-toh>ToH Loading...</my-toh>
-    <my-wiki>Wiki Loading...</my-wiki>
-    <my-wiki-smart>WikiSmart Loading...</my-wiki-smart>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
diff --git a/public/docs/_examples/server-communication/dart/web/main.dart b/public/docs/_examples/server-communication/dart/web/main.dart
index 1b7933a87d..a66ddb454b 100644
--- a/public/docs/_examples/server-communication/dart/web/main.dart
+++ b/public/docs/_examples/server-communication/dart/web/main.dart
@@ -1,12 +1,34 @@
-// #docregion
-import 'package:angular2/platform/browser.dart';
+// #docplaster
+// #docregion final
+import 'package:angular2/core.dart' show Provider;
+// #docregion v1
+import 'package:angular2/platform/browser.dart' show bootstrap;
+// #docregion http-providers
+import 'package:http/browser_client.dart' show BrowserClient;
+// #enddocregion http-providers
 
-import 'package:server_communication/toh/toh_component.dart';
-import 'package:server_communication/wiki/wiki_component.dart';
-import 'package:server_communication/wiki/wiki_smart_component.dart';
+import 'package:server_communication/app_component.dart';
+// #enddocregion v1
+// #docregion in-mem-web-api-imports
+import "package:server_communication/hero_data.dart";
 
-main() {
-  bootstrap(TohComponent);
-  bootstrap(WikiComponent);
-  bootstrap(WikiSmartComponent);
+// #enddocregion in-mem-web-api-imports
+// #docregion in-mem-web-api-providers
+void main() {
+  bootstrap(AppComponent, const [
+    // in-memory web api provider
+    const Provider(BrowserClient,
+        useFactory: HttpClientBackendServiceFactory, deps: const [])
+    // TODO: drop `deps` once fix lands for 
+    // https://github.com/angular/angular/issues/5266
+  ]);
 }
+// #enddocregion final, in-mem-web-api-providers
+/*
+// #docregion v1
+
+void main() {
+  bootstrap(AppComponent, const [BrowserClient]);
+}
+// #enddocregion v1
+*/
diff --git a/public/docs/_examples/server-communication/dart/web/sample.css b/public/docs/_examples/server-communication/dart/web/sample.css
new file mode 100644
index 0000000000..3bb281e096
--- /dev/null
+++ b/public/docs/_examples/server-communication/dart/web/sample.css
@@ -0,0 +1 @@
+.error {color:red;}
diff --git a/public/docs/_examples/server-communication/e2e-spec.js b/public/docs/_examples/server-communication/e2e-spec.js
index 4525c9514f..98a3f1e03a 100644
--- a/public/docs/_examples/server-communication/e2e-spec.js
+++ b/public/docs/_examples/server-communication/e2e-spec.js
@@ -4,69 +4,62 @@ describe('Server Communication', function () {
     browser.get('');
   });
 
-  describe('Tour of Heroes e2e tests', function () {
-    
-    var _initialHeroCount = 4;
-    var _newHeroName = 'Mr. IQ';
-    var _heroCountAfterAdd = 5;
-    
-    it('should display ' + _initialHeroCount + ' heroes after init', function () {
-      var myTohComp = element(by.tagName('my-toh'));
-      expect(myTohComp).toBeDefined('<my-toh> must exist');
-      var heroListComp = myTohComp.element(by.tagName('hero-list'));
+  describe('Tour of Heroes (Observable)', function () {
+
+    var initialHeroCount = 4;
+    var newHeroName = 'Mr. IQ';
+    var heroCountAfterAdd = 5;
+
+    var heroListComp = element(by.tagName('hero-list'));
+    var addButton = heroListComp.element(by.tagName('button'));
+    var heroTags = heroListComp.all(by.tagName('li'));
+    var heroNameInput = heroListComp.element(by.tagName('input'));
+
+    it('should exist', function() {
       expect(heroListComp).toBeDefined('<hero-list> must exist');
-      var heroTags = heroListComp.all(by.tagName('li'));
-      expect(heroTags.count()).toBe(_initialHeroCount);
     });
-    
+
+    it('should display ' + initialHeroCount + ' heroes after init', function () {
+      expect(heroTags.count()).toBe(initialHeroCount);
+    });
+
     it('should not add hero with empty name', function () {
-      var myTohComp = element(by.tagName('my-toh'));
-      expect(myTohComp).toBeDefined('<my-toh> must exist');
-      var addButton = myTohComp.element(by.tagName('button'));
       expect(addButton).toBeDefined('"Add Hero" button must be defined');
       addButton.click().then(function() {
-        var heroListComp = myTohComp.element(by.tagName('hero-list'));
-        var heroTags = heroListComp.all(by.tagName('li'));
-        expect(heroTags.count()).toBe(_initialHeroCount, 'No new hero should be added');
+        expect(heroTags.count()).toBe(initialHeroCount, 'No new hero should be added');
       });
     })
 
     it('should add a new hero to the list', function () {
-      var myTohComp = element(by.tagName('my-toh'));
-      expect(myTohComp).toBeDefined('<my-toh> must exist');
-      var heroNameInput = myTohComp.element(by.tagName('input'));
       expect(heroNameInput).toBeDefined('<input> for hero name must exist');
-      var addButton = myTohComp.element(by.tagName('button'));
       expect(addButton).toBeDefined('"Add Hero" button must be defined');
-      sendKeys(heroNameInput, _newHeroName);
+      sendKeys(heroNameInput, newHeroName);
       addButton.click().then(function() {
-        var heroListComp = myTohComp.element(by.tagName('hero-list'));
-        var heroTags = heroListComp.all(by.tagName('li'));
-        expect(heroTags.count()).toBe(_heroCountAfterAdd, 'A new hero should be added');
-        var newHeroInList = heroTags.get(_heroCountAfterAdd - 1).getText();
-        expect(newHeroInList).toBe(_newHeroName, 'The hero should be added to the end of the list');
+        expect(heroTags.count()).toBe(heroCountAfterAdd, 'A new hero should be added');
+        var newHeroInList = heroTags.get(heroCountAfterAdd - 1).getText();
+        expect(newHeroInList).toBe(newHeroName, 'The hero should be added to the end of the list');
       });
     })
   });
-  
-  describe('Wikipedia Demo e2e tests', function () {
-    
+
+  describe('Wikipedia Demo', function () {
+
     it('should initialize the demo with empty result list', function () {
       var myWikiComp = element(by.tagName('my-wiki'));
       expect(myWikiComp).toBeDefined('<my-wiki> must exist');
       var resultList = myWikiComp.all(by.tagName('li'));
       expect(resultList.count()).toBe(0, 'result list must be empty');
     });
-    
+
     describe('Fetches after each keystroke', function () {
       it('should fetch results after "B"', function(done) {
         testForRefreshedResult('B', done);
       });
-      
+
       it('should fetch results after "Ba"', function(done) {
         testForRefreshedResult('a', done);
       });
-      
+
       it('should fetch results after "Bas"', function(done) {
         testForRefreshedResult('s', done);
       });
@@ -75,13 +68,13 @@ describe('Server Communication', function () {
         testForRefreshedResult('ic', done);
       });
     });
-    
+
     function testForRefreshedResult(keyPressed, done) {
       testForResult('my-wiki', keyPressed, false, done)
     }
   });
-  
-  describe('Smarter Wikipedia Demo e2e tests', function () {
+
+  describe('Smarter Wikipedia Demo', function () {
 
     it('should initialize the demo with empty result list', function () {
       var myWikiSmartComp = element(by.tagName('my-wiki-smart'));
@@ -93,40 +86,40 @@ describe('Server Communication', function () {
     it('should fetch results after "Java"', function(done) {
       testForNewResult('Java', done);
     });
-    
+
     it('should fetch results after "JavaS"', function(done) {
       testForStaleResult('S', done);
     });
-    
+
     it('should fetch results after "JavaSc"', function(done) {
       testForStaleResult('c', done);
     });
-    
+
     it('should fetch results after "JavaScript"', function(done) {
       testForStaleResult('ript', done);
     });
 
-    
+
     function testForNewResult(keyPressed, done) {
       testForResult('my-wiki-smart', keyPressed, false, done)
     }
 
     function testForStaleResult(keyPressed, done) {
-      testForResult('my-wiki-smart', keyPressed, true, done)      
+      testForResult('my-wiki-smart', keyPressed, true, done)
     }
 
   });
-  
+
   function testForResult(componentTagName, keyPressed, hasListBeforeSearch, done) {
     var searchWait = 1000; // Wait for wikipedia but not so long that tests timeout
     var wikiComponent = element(by.tagName(componentTagName));
     expect(wikiComponent).toBeDefined('<' + componentTagName + '> must exist');
     var searchBox = wikiComponent.element(by.tagName('input'));
     expect(searchBox).toBeDefined('<input> for search must exist');
-    
+
     searchBox.sendKeys(keyPressed).then(function () {
       var resultList = wikiComponent.all(by.tagName('li'));
-      
+
       if (hasListBeforeSearch) {
         expect(resultList.count()).toBeGreaterThan(0, 'result list should not be empty before search');
       }
@@ -137,5 +130,5 @@ describe('Server Communication', function () {
       }, searchWait);
     });
   }
-  
+
 });
diff --git a/public/docs/_examples/server-communication/ts/app/add-rxjs-operators.ts b/public/docs/_examples/server-communication/ts/app/add-rxjs-operators.ts
deleted file mode 100644
index 1381b30cd9..0000000000
--- a/public/docs/_examples/server-communication/ts/app/add-rxjs-operators.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// #docregion
-// import 'rxjs/Rx'; // adds ALL RxJS operators to Observable
-
-// Just the Observable operators we need for THIS app.
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/switchMap';
diff --git a/public/docs/_examples/server-communication/ts/app/app.component.ts b/public/docs/_examples/server-communication/ts/app/app.component.ts
new file mode 100644
index 0000000000..144475d0e4
--- /dev/null
+++ b/public/docs/_examples/server-communication/ts/app/app.component.ts
@@ -0,0 +1,37 @@
+// #docplaster
+// #docregion
+import { Component }         from '@angular/core';
+
+// #docregion import-rxjs
+// Add the RxJS Observable operators we need in this app.
+import './rxjs-operators';
+// #enddocregion import-rxjs
+
+import { HeroListComponent }        from './toh/hero-list.component';
+import { HeroListPromiseComponent } from './toh/hero-list.component.promise';
+
+import { WikiComponent }      from './wiki/wiki.component';
+import { WikiSmartComponent } from './wiki/wiki-smart.component';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <hero-list></hero-list>
+    <hero-list-promise></hero-list-promise>
+    <my-wiki></my-wiki>
+    <my-wiki-smart></my-wiki-smart>
+  `,
+// #enddocregion
+/*
+// #docregion http-providers
+  providers: [ HTTP_PROVIDERS ]
+// #enddocregion http-providers
+*/
+// #docregion
+  directives: [
+    HeroListComponent, HeroListPromiseComponent,
+    WikiComponent, WikiSmartComponent
+  ]
+})
+export class AppComponent { }
+// #enddocregion
diff --git a/public/docs/_examples/server-communication/ts/app/main.ts b/public/docs/_examples/server-communication/ts/app/main.ts
index 7fa98321f0..870548bd32 100644
--- a/public/docs/_examples/server-communication/ts/app/main.ts
+++ b/public/docs/_examples/server-communication/ts/app/main.ts
@@ -1,21 +1,30 @@
 // #docplaster
-// #docregion
+// #docregion final
+// Imports for loading & configuring the in-memory web api
+import { provide }    from '@angular/core';
+import { XHRBackend } from '@angular/http';
+
+import { InMemoryBackendService,
+         SEED_DATA }  from 'angular2-in-memory-web-api/core';
+import { HeroData }   from './hero-data';
+
+// The usual bootstrapping imports
+// #docregion v1
 import { bootstrap }      from '@angular/platform-browser-dynamic';
-// #docregion http-providers
 import { HTTP_PROVIDERS } from '@angular/http';
-// #enddocregion http-providers
 
-// #docregion import-rxjs
-// Add the RxJS Observable operators we need in this app.
-import './add-rxjs-operators';
-// #enddocregion import-rxjs
+import { AppComponent }   from './app.component';
 
-import { TohComponent }       from './toh/toh.component';
-import { WikiComponent }      from './wiki/wiki.component';
-import { WikiSmartComponent } from './wiki/wiki-smart.component';
-
-// #docregion http-providers
-bootstrap(TohComponent, [HTTP_PROVIDERS]);
-// #enddocregion http-providers
-bootstrap(WikiComponent);
-bootstrap(WikiSmartComponent);
+// #enddocregion v1, final
+/*
+// #docregion v1
+bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
+// #enddocregion v1
+ */
+// #docregion final
+bootstrap(AppComponent, [
+    HTTP_PROVIDERS,
+    provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
+    provide(SEED_DATA,  { useClass: HeroData })                // in-mem server data
+]);
+// #enddocregion final
diff --git a/public/docs/_examples/server-communication/ts/app/rxjs-operators.ts b/public/docs/_examples/server-communication/ts/app/rxjs-operators.ts
new file mode 100644
index 0000000000..6f8d626267
--- /dev/null
+++ b/public/docs/_examples/server-communication/ts/app/rxjs-operators.ts
@@ -0,0 +1,16 @@
+// #docregion
+// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable
+
+// See node_module/rxjs/Rxjs.js
+// Import just the rxjs statics and operators we need for THIS app.
+
+// Statics
+import 'rxjs/add/observable/throw';
+
+// Operators
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/toPromise';
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.html b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.html
index c099d222ef..36666f2ed3 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.html
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.html
@@ -1,4 +1,5 @@
 <!-- #docregion -->
+<h1>Tour of Heroes ({{mode}})</h1>
 <h3>Heroes:</h3>
 <ul>
   <li *ngFor="let hero of heroes">
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.promise.ts
similarity index 79%
rename from public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts
rename to public/docs/_examples/server-communication/ts/app/toh/hero-list.component.promise.ts
index 3e4c3c6bf2..7df0676a9a 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.1.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.promise.ts
@@ -1,21 +1,22 @@
-// ToH Promise Version
 // #docregion
+// Promise Version
 import { Component, OnInit } from '@angular/core';
 import { Hero }              from './hero';
-import { HeroService }       from './hero.service.1';
+import { HeroService }       from './hero.service.promise';
 
 @Component({
-  selector: 'hero-list',
+  selector: 'hero-list-promise',
   templateUrl: 'app/toh/hero-list.component.html',
-  styles: ['.error {color:red;}']
+  providers: [ HeroService ]
 })
 // #docregion component
-export class HeroListComponent implements OnInit {
+export class HeroListPromiseComponent implements OnInit {
 
   constructor (private heroService: HeroService) {}
 
   errorMessage: string;
   heroes: Hero[];
+  mode = 'Promise';
 
   ngOnInit() { this.getHeroes(); }
 
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts
index 2cb1689e01..f582cfcc65 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero-list.component.ts
@@ -1,13 +1,13 @@
 // #docregion
+// Observable Version
 import { Component, OnInit } from '@angular/core';
-
 import { Hero }              from './hero';
 import { HeroService }       from './hero.service';
 
 @Component({
   selector: 'hero-list',
   templateUrl: 'app/toh/hero-list.component.html',
-  styles: ['.error {color:red;}']
+  providers: [ HeroService ]
 })
 // #docregion component
 export class HeroListComponent implements OnInit {
@@ -15,7 +15,8 @@ export class HeroListComponent implements OnInit {
   constructor (private heroService: HeroService) {}
 
   errorMessage: string;
-  heroes:Hero[];
+  heroes: Hero[];
+  mode = 'Observable';
 
   ngOnInit() { this.getHeroes(); }
 
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts b/public/docs/_examples/server-communication/ts/app/toh/hero.service.promise.ts
similarity index 90%
rename from public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts
rename to public/docs/_examples/server-communication/ts/app/toh/hero.service.promise.ts
index a6da29514a..c3ecd07e49 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero.service.1.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero.service.promise.ts
@@ -1,7 +1,6 @@
-// ToH Promise Version
 // #docplaster
-
 // #docregion
+// Promise Version
 import { Injectable }     from '@angular/core';
 import { Http, Response } from '@angular/http';
 import { Headers, RequestOptions } from '@angular/http';
@@ -41,7 +40,8 @@ export class HeroService {
   private handleError (error: any) {
     // In a real world app, we might use a remote logging infrastructure
     // We'd also dig deeper into the error to get a better message
-    let errMsg = error.message || error.statusText || 'Server error';
+    let errMsg = (error.message) ? error.message :
+      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
     console.error(errMsg); // log to console instead
     return Promise.reject(errMsg);
   }
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts b/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts
index fcc0348c05..f1f749b507 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero.service.ts
@@ -1,5 +1,6 @@
 // #docplaster
 // #docregion
+// Observable Version
 // #docregion v1
 import { Injectable }     from '@angular/core';
 import { Http, Response } from '@angular/http';
@@ -14,7 +15,9 @@ import { Observable }     from 'rxjs/Observable';
 
 @Injectable()
 export class HeroService {
+  // #docregion ctor
   constructor (private http: Http) {}
+  // #enddocregion ctor
 
   // #docregion endpoint
   private heroesUrl = 'app/heroes';  // URL to web API
@@ -52,7 +55,8 @@ export class HeroService {
   private handleError (error: any) {
     // In a real world app, we might use a remote logging infrastructure
     // We'd also dig deeper into the error to get a better message
-    let errMsg = error.message || error.statusText || 'Server error';
+    let errMsg = (error.message) ? error.message :
+      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
     console.error(errMsg); // log to console instead
     return Observable.throw(errMsg);
   }
diff --git a/public/docs/_examples/server-communication/ts/app/toh/hero.ts b/public/docs/_examples/server-communication/ts/app/toh/hero.ts
index bf664b0eec..09b8d295ce 100644
--- a/public/docs/_examples/server-communication/ts/app/toh/hero.ts
+++ b/public/docs/_examples/server-communication/ts/app/toh/hero.ts
@@ -1,6 +1,6 @@
 // #docregion
 export class Hero {
   constructor(
-    public id:number,
-    public name:string) { }
+    public id: number,
+    public name: string) { }
 }
diff --git a/public/docs/_examples/server-communication/ts/app/toh/toh.component.ts b/public/docs/_examples/server-communication/ts/app/toh/toh.component.ts
deleted file mode 100644
index 7e0a663918..0000000000
--- a/public/docs/_examples/server-communication/ts/app/toh/toh.component.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// #docplaster
-// #docregion
-import { Component }         from '@angular/core';
-import { HTTP_PROVIDERS }    from '@angular/http';
-
-import { HeroListComponent } from './hero-list.component';
-import { HeroService }       from './hero.service';
-// #enddocregion
-
-// #docregion in-mem-web-api-imports
-import { provide }           from '@angular/core';
-import { XHRBackend }        from '@angular/http';
-
-// in-memory web api imports
-import { InMemoryBackendService,
-        SEED_DATA }          from 'angular2-in-memory-web-api/core';
-import { HeroData }          from '../hero-data';
-// #enddocregion in-mem-web-api-imports
-// #docregion
-
-@Component({
-  selector: 'my-toh',
-// #docregion template
-  template: `
-  <h1>Tour of Heroes</h1>
-  <hero-list></hero-list>
-  `,
-  // #enddocregion template
-  directives: [HeroListComponent],
-  providers:  [
-    HTTP_PROVIDERS,
-    HeroService,
-// #enddocregion
-// #docregion in-mem-web-api-providers
-    // in-memory web api providers
-    provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
-    provide(SEED_DATA,  { useClass: HeroData }) // in-mem server data
-// #enddocregion in-mem-web-api-providers
-// #docregion
-  ]
-})
-export class TohComponent { }
-// #enddocregion
diff --git a/public/docs/_examples/server-communication/ts/index.html b/public/docs/_examples/server-communication/ts/index.html
index 21dc568313..c2d2656c84 100644
--- a/public/docs/_examples/server-communication/ts/index.html
+++ b/public/docs/_examples/server-communication/ts/index.html
@@ -6,9 +6,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="sample.css">
+
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -21,9 +23,7 @@
   </head>
 
   <body>
-    <my-toh>ToH Loading...</my-toh>
-    <my-wiki>Wiki Loading...</my-wiki>
-    <my-wiki-smart>WikiSmart Loading...</my-wiki-smart>
+      <my-app>Loading...</my-app>
   </body>
 
 </html>
diff --git a/public/docs/_examples/server-communication/ts/sample.css b/public/docs/_examples/server-communication/ts/sample.css
new file mode 100644
index 0000000000..3bb281e096
--- /dev/null
+++ b/public/docs/_examples/server-communication/ts/sample.css
@@ -0,0 +1 @@
+.error {color:red;}
diff --git a/public/docs/_examples/structural-directives/ts/index.html b/public/docs/_examples/structural-directives/ts/index.html
index 8df7729afe..da815d8e69 100644
--- a/public/docs/_examples/structural-directives/ts/index.html
+++ b/public/docs/_examples/structural-directives/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/style-guide/ts/index.html b/public/docs/_examples/style-guide/ts/index.html
index 9a11de94e3..820bf59a96 100644
--- a/public/docs/_examples/style-guide/ts/index.html
+++ b/public/docs/_examples/style-guide/ts/index.html
@@ -10,7 +10,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/styleguide/package.1.json b/public/docs/_examples/styleguide/package.1.json
index 7129ac907a..f4c2fdaef5 100644
--- a/public/docs/_examples/styleguide/package.1.json
+++ b/public/docs/_examples/styleguide/package.1.json
@@ -11,8 +11,7 @@
   "dependencies": {
     "angular2": "2.0.0-beta.0",
     "systemjs": "0.19.6",
-    "es6-promise": "^3.0.2",
-    "es6-shim": "^0.35.0",
+    "core-js": "^2.4.0",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
     "zone.js": "0.5.10"
diff --git a/public/docs/_examples/styleguide/ts/index.html b/public/docs/_examples/styleguide/ts/index.html
index b98f73d603..5983457e07 100644
--- a/public/docs/_examples/styleguide/ts/index.html
+++ b/public/docs/_examples/styleguide/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/template-syntax/ts/index.html b/public/docs/_examples/template-syntax/ts/index.html
index c7eb394e9c..d3a4ec6aa6 100644
--- a/public/docs/_examples/template-syntax/ts/index.html
+++ b/public/docs/_examples/template-syntax/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="template-syntax.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/testing/ts/index.html b/public/docs/_examples/testing/ts/index.html
index 07fca45f52..02b11078c5 100644
--- a/public/docs/_examples/testing/ts/index.html
+++ b/public/docs/_examples/testing/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/testing/ts/unit-tests-bag.html b/public/docs/_examples/testing/ts/unit-tests-bag.html
index b5313257e9..f373c387e8 100644
--- a/public/docs/_examples/testing/ts/unit-tests-bag.html
+++ b/public/docs/_examples/testing/ts/unit-tests-bag.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="node_modules/core-js/client/shim.min.js"></script>
 
 <!-- NOT CONVERTED YET -->
   <script src="node_modules/systemjs/dist/system.src.js"></script>
diff --git a/public/docs/_examples/toh-1/ts/index.html b/public/docs/_examples/toh-1/ts/index.html
index 22cff3f553..f784483eaa 100644
--- a/public/docs/_examples/toh-1/ts/index.html
+++ b/public/docs/_examples/toh-1/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/toh-2/dart/lib/app_component.dart b/public/docs/_examples/toh-2/dart/lib/app_component.dart
index b33aa28b4d..4959afe753 100644
--- a/public/docs/_examples/toh-2/dart/lib/app_component.dart
+++ b/public/docs/_examples/toh-2/dart/lib/app_component.dart
@@ -98,16 +98,16 @@ class AppComponent {
 
 // #docregion hero-array
 final List<Hero> mockHeroes = [
-  new Hero(11, "Mr. Nice"),
-  new Hero(12, "Narco"),
-  new Hero(13, "Bombasto"),
-  new Hero(14, "Celeritas"),
-  new Hero(15, "Magneta"),
-  new Hero(16, "RubberMan"),
-  new Hero(17, "Dynama"),
-  new Hero(18, "Dr IQ"),
-  new Hero(19, "Magma"),
-  new Hero(20, "Tornado")
+  new Hero(11, 'Mr. Nice'),
+  new Hero(12, 'Narco'),
+  new Hero(13, 'Bombasto'),
+  new Hero(14, 'Celeritas'),
+  new Hero(15, 'Magneta'),
+  new Hero(16, 'RubberMan'),
+  new Hero(17, 'Dynama'),
+  new Hero(18, 'Dr IQ'),
+  new Hero(19, 'Magma'),
+  new Hero(20, 'Tornado')
 ];
 // #enddocregion hero-array
 
diff --git a/public/docs/_examples/toh-2/ts/index.html b/public/docs/_examples/toh-2/ts/index.html
index 71fc2f4e4a..485409815c 100644
--- a/public/docs/_examples/toh-2/ts/index.html
+++ b/public/docs/_examples/toh-2/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/toh-3/dart/lib/app_component.dart b/public/docs/_examples/toh-3/dart/lib/app_component.dart
index e4296ec7d5..774f8e68f6 100644
--- a/public/docs/_examples/toh-3/dart/lib/app_component.dart
+++ b/public/docs/_examples/toh-3/dart/lib/app_component.dart
@@ -89,14 +89,14 @@ class AppComponent {
 }
 
 final List<Hero> mockHeroes = [
-  new Hero(11, "Mr. Nice"),
-  new Hero(12, "Narco"),
-  new Hero(13, "Bombasto"),
-  new Hero(14, "Celeritas"),
-  new Hero(15, "Magneta"),
-  new Hero(16, "RubberMan"),
-  new Hero(17, "Dynama"),
-  new Hero(18, "Dr IQ"),
-  new Hero(19, "Magma"),
-  new Hero(20, "Tornado")
+  new Hero(11, 'Mr. Nice'),
+  new Hero(12, 'Narco'),
+  new Hero(13, 'Bombasto'),
+  new Hero(14, 'Celeritas'),
+  new Hero(15, 'Magneta'),
+  new Hero(16, 'RubberMan'),
+  new Hero(17, 'Dynama'),
+  new Hero(18, 'Dr IQ'),
+  new Hero(19, 'Magma'),
+  new Hero(20, 'Tornado')
 ];
diff --git a/public/docs/_examples/toh-3/ts/index.html b/public/docs/_examples/toh-3/ts/index.html
index 01d42394de..e9c099696b 100644
--- a/public/docs/_examples/toh-3/ts/index.html
+++ b/public/docs/_examples/toh-3/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/toh-4/dart/lib/hero_detail_component.dart b/public/docs/_examples/toh-4/dart/lib/hero_detail_component.dart
index 14a1382348..8a6144ddfb 100644
--- a/public/docs/_examples/toh-4/dart/lib/hero_detail_component.dart
+++ b/public/docs/_examples/toh-4/dart/lib/hero_detail_component.dart
@@ -1,3 +1,4 @@
+// #docregion
 import 'package:angular2/core.dart';
 
 import 'hero.dart';
diff --git a/public/docs/_examples/toh-4/dart/lib/mock_heroes.dart b/public/docs/_examples/toh-4/dart/lib/mock_heroes.dart
index 55434761a2..645aa56c25 100644
--- a/public/docs/_examples/toh-4/dart/lib/mock_heroes.dart
+++ b/public/docs/_examples/toh-4/dart/lib/mock_heroes.dart
@@ -2,15 +2,15 @@
 import 'hero.dart';
 
 final List<Hero> mockHeroes = [
-	new Hero(11, "Mr. Nice"),
-	new Hero(12, "Narco"),
-	new Hero(13, "Bombasto"),
-	new Hero(14, "Celeritas"),
-	new Hero(15, "Magneta"),
-	new Hero(16, "RubberMan"),
-	new Hero(17, "Dynama"),
-	new Hero(18, "Dr IQ"),
-	new Hero(19, "Magma"),
-	new Hero(20, "Tornado")
+	new Hero(11, 'Mr. Nice'),
+	new Hero(12, 'Narco'),
+	new Hero(13, 'Bombasto'),
+	new Hero(14, 'Celeritas'),
+	new Hero(15, 'Magneta'),
+	new Hero(16, 'RubberMan'),
+	new Hero(17, 'Dynama'),
+	new Hero(18, 'Dr IQ'),
+	new Hero(19, 'Magma'),
+	new Hero(20, 'Tornado')
 ];
-// #enddocregion
\ No newline at end of file
+// #enddocregion
diff --git a/public/docs/_examples/toh-4/ts/app/app.component.ts b/public/docs/_examples/toh-4/ts/app/app.component.ts
index 9b0de3caeb..7ca63ee237 100644
--- a/public/docs/_examples/toh-4/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-4/ts/app/app.component.ts
@@ -23,8 +23,8 @@ import { HeroService } from './hero.service';
     </ul>
     <my-hero-detail [hero]="selectedHero"></my-hero-detail>
   `,
-  // #enddocregion template  
-  styles:[`
+  // #enddocregion template
+  styles: [`
     .selected {
       background-color: #CFD8DC !important;
       color: white;
diff --git a/public/docs/_examples/toh-4/ts/app/mock-heroes.ts b/public/docs/_examples/toh-4/ts/app/mock-heroes.ts
index 35fa5c67a8..ddd36d7868 100644
--- a/public/docs/_examples/toh-4/ts/app/mock-heroes.ts
+++ b/public/docs/_examples/toh-4/ts/app/mock-heroes.ts
@@ -2,15 +2,15 @@
 import { Hero } from './hero';
 
 export var HEROES: Hero[] = [
-	{"id": 11, "name": "Mr. Nice"},
-	{"id": 12, "name": "Narco"},
-	{"id": 13, "name": "Bombasto"},
-	{"id": 14, "name": "Celeritas"},
-	{"id": 15, "name": "Magneta"},
-	{"id": 16, "name": "RubberMan"},
-	{"id": 17, "name": "Dynama"},
-	{"id": 18, "name": "Dr IQ"},
-	{"id": 19, "name": "Magma"},
-	{"id": 20, "name": "Tornado"}
+  {id: 11, name: 'Mr. Nice'},
+  {id: 12, name: 'Narco'},
+  {id: 13, name: 'Bombasto'},
+  {id: 14, name: 'Celeritas'},
+  {id: 15, name: 'Magneta'},
+  {id: 16, name: 'RubberMan'},
+  {id: 17, name: 'Dynama'},
+  {id: 18, name: 'Dr IQ'},
+  {id: 19, name: 'Magma'},
+  {id: 20, name: 'Tornado'}
 ];
 // #enddocregion
diff --git a/public/docs/_examples/toh-4/ts/index.html b/public/docs/_examples/toh-4/ts/index.html
index 01d42394de..e9c099696b 100644
--- a/public/docs/_examples/toh-4/ts/index.html
+++ b/public/docs/_examples/toh-4/ts/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/toh-5/dart/lib/mock_heroes.dart b/public/docs/_examples/toh-5/dart/lib/mock_heroes.dart
index ee46fa86fe..b96c17ff61 100644
--- a/public/docs/_examples/toh-5/dart/lib/mock_heroes.dart
+++ b/public/docs/_examples/toh-5/dart/lib/mock_heroes.dart
@@ -1,14 +1,14 @@
 import 'hero.dart';
 
 final List<Hero> HEROES = [
-  new Hero(11, "Mr. Nice"),
-  new Hero(12, "Narco"),
-  new Hero(13, "Bombasto"),
-  new Hero(14, "Celeritas"),
-  new Hero(15, "Magneta"),
-  new Hero(16, "RubberMan"),
-  new Hero(17, "Dynama"),
-  new Hero(18, "Dr IQ"),
-  new Hero(19, "Magma"),
-  new Hero(20, "Tornado")
-];
\ No newline at end of file
+  new Hero(11, 'Mr. Nice'),
+  new Hero(12, 'Narco'),
+  new Hero(13, 'Bombasto'),
+  new Hero(14, 'Celeritas'),
+  new Hero(15, 'Magneta'),
+  new Hero(16, 'RubberMan'),
+  new Hero(17, 'Dynama'),
+  new Hero(18, 'Dr IQ'),
+  new Hero(19, 'Magma'),
+  new Hero(20, 'Tornado')
+];
diff --git a/public/docs/_examples/toh-5/ts/app/app.component.ts b/public/docs/_examples/toh-5/ts/app/app.component.ts
index bedaca3e38..8d26ea6d90 100644
--- a/public/docs/_examples/toh-5/ts/app/app.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/app.component.ts
@@ -3,12 +3,12 @@
 import { Component } from '@angular/core';
 import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
-import { HeroService } from './hero.service';
 import { DashboardComponent } from './dashboard.component';
 import { HeroesComponent } from './heroes.component';
 // #docregion hero-detail-import
 import { HeroDetailComponent } from './hero-detail.component';
 // #enddocregion hero-detail-import
+import { HeroService } from './hero.service';
 
 @Component({
   selector: 'my-app',
diff --git a/public/docs/_examples/toh-5/ts/app/heroes.component.ts b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
index 6567c899d9..300f3065e0 100644
--- a/public/docs/_examples/toh-5/ts/app/heroes.component.ts
+++ b/public/docs/_examples/toh-5/ts/app/heroes.component.ts
@@ -4,7 +4,6 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router-deprecated';
 
 import { Hero } from './hero';
-import { HeroDetailComponent } from './hero-detail.component';
 import { HeroService } from './hero.service';
 
 // #docregion metadata
@@ -13,8 +12,7 @@ import { HeroService } from './hero.service';
   selector: 'my-heroes',
 // #enddocregion heroes-component-renaming
   templateUrl: 'app/heroes.component.html',
-  styleUrls:  ['app/heroes.component.css'],
-  directives: [HeroDetailComponent]
+  styleUrls:  ['app/heroes.component.css']
 // #docregion heroes-component-renaming
 })
 // #enddocregion heroes-component-renaming
diff --git a/public/docs/_examples/toh-5/ts/app/mock-heroes.ts b/public/docs/_examples/toh-5/ts/app/mock-heroes.ts
index cdcba35097..ddd36d7868 100644
--- a/public/docs/_examples/toh-5/ts/app/mock-heroes.ts
+++ b/public/docs/_examples/toh-5/ts/app/mock-heroes.ts
@@ -2,15 +2,15 @@
 import { Hero } from './hero';
 
 export var HEROES: Hero[] = [
-	{"id": 11, "name": "Mr. Nice"},
-	{"id": 12, "name": "Narco"},
-	{"id": 13, "name": "Bombasto"},
-	{"id": 14, "name": "Celeritas"},
-	{"id": 15, "name": "Magneta"},
-	{"id": 16, "name": "RubberMan"},
-	{"id": 17, "name": "Dynama"},
-	{"id": 18, "name": "Dr IQ"},
-	{"id": 19, "name": "Magma"},
-	{"id": 20, "name": "Tornado"}
+  {id: 11, name: 'Mr. Nice'},
+  {id: 12, name: 'Narco'},
+  {id: 13, name: 'Bombasto'},
+  {id: 14, name: 'Celeritas'},
+  {id: 15, name: 'Magneta'},
+  {id: 16, name: 'RubberMan'},
+  {id: 17, name: 'Dynama'},
+  {id: 18, name: 'Dr IQ'},
+  {id: 19, name: 'Magma'},
+  {id: 20, name: 'Tornado'}
 ];
-// #enddocregion
\ No newline at end of file
+// #enddocregion
diff --git a/public/docs/_examples/toh-5/ts/index.html b/public/docs/_examples/toh-5/ts/index.html
index bdb039a0fc..93fa8d4889 100644
--- a/public/docs/_examples/toh-5/ts/index.html
+++ b/public/docs/_examples/toh-5/ts/index.html
@@ -15,7 +15,7 @@
     <!-- #enddocregion css -->
     <!-- #docregion head -->
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/tutorial/e2e-spec.js b/public/docs/_examples/toh-6/e2e-spec.js
similarity index 50%
rename from public/docs/_examples/tutorial/e2e-spec.js
rename to public/docs/_examples/toh-6/e2e-spec.js
index f35fcd1287..d5823b9add 100644
--- a/public/docs/_examples/tutorial/e2e-spec.js
+++ b/public/docs/_examples/toh-6/e2e-spec.js
@@ -1,10 +1,9 @@
-describe('Tutorial', function () {
+describe('TOH Http Chapter', function () {
 
-  beforeAll(function () {
+  beforeEach(function () {
     browser.get('');
   });
 
-
   function getPageStruct() {
     hrefEles = element.all(by.css('my-app a'));
 
@@ -16,12 +15,122 @@ describe('Tutorial', function () {
 
       myHeroesHref: hrefEles.get(1),
       myHeroesParent: element(by.css('my-app my-heroes')),
-      allHeroes: element.all(by.css('my-app my-heroes li')),
+      allHeroes: element.all(by.css('my-app my-heroes li .hero-element')),
+
+      firstDeleteButton: element.all(by.buttonText('Delete')).get(0),
+
+      addButton: element.all(by.buttonText('Add New Hero')).get(0),
 
       heroDetail: element(by.css('my-app my-hero-detail'))
     }
   }
 
+  it('should be able to add a hero from the "Heroes" view', function(){
+    var page = getPageStruct();
+    var heroCount;
+
+    page.myHeroesHref.click().then(function() {
+      browser.waitForAngular();
+      heroCount = page.allHeroes.count();
+      expect(heroCount).toBe(10, 'should show 10');
+    }).then(function() {
+      return page.addButton.click();
+    }).then(function(){
+      return save(page,'','The New Hero');
+    }).then(function(){
+      browser.waitForAngular();
+
+      heroCount = page.allHeroes.count();
+      expect(heroCount).toBe(11, 'should show 11');
+
+      var newHero = element(by.xpath('//span[@class="hero-element" and contains(text(),"The New Hero")]'));
+      expect(newHero).toBeDefined();
+    });
+  });
+
+  it('should be able to delete hero from "Heroes" view', function(){
+    var page = getPageStruct();
+    var heroCount;
+
+    page.myHeroesHref.click().then(function() {
+      browser.waitForAngular();
+      heroCount = page.allHeroes.count();
+      expect(heroCount).toBe(10, 'should show 10');
+    }).then(function() {
+      return page.firstDeleteButton.click();
+    }).then(function(){
+      browser.waitForAngular();
+      heroCount = page.allHeroes.count();
+      expect(heroCount).toBe(9, 'should show 9');
+    });
+  });
+
+  it('should be able to save details from "Dashboard" view', function () {
+    var page = getPageStruct();
+    expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be available');
+    var heroEle = page.topHeroes.get(2);
+    var heroDescrEle = heroEle.element(by.css('h4'));
+    var heroDescr;
+
+    return heroDescrEle.getText().then(function(text) {
+      heroDescr = text;
+      return heroEle.click();
+    }).then(function() {
+      return save(page, heroDescr, '-foo');
+    })
+    .then(function(){
+      return page.myDashboardHref.click();
+    })
+    .then(function() {
+      expect(page.myDashboardParent.isPresent()).toBe(true, 'dashboard element should be back');
+      expect(heroDescrEle.getText()).toEqual(heroDescr + '-foo');
+    });
+  });
+
+  it('should be able to save details from "Heroes" view', function () {
+    var page = getPageStruct();
+
+    var viewDetailsButtonEle = page.myHeroesParent.element(by.cssContainingText('button', 'View Details'));
+    var heroEle, heroDescr;
+
+    page.myHeroesHref.click().then(function() {
+      expect(page.myDashboardParent.isPresent()).toBe(false, 'dashboard element should NOT be present');
+      expect(page.myHeroesParent.isPresent()).toBe(true, 'myHeroes element should be present');
+      expect(viewDetailsButtonEle.isPresent()).toBe(false, 'viewDetails button should not yet be present');
+      heroEle = page.allHeroes.get(0);
+      return heroEle.getText();
+    }).then(function(text) {
+      // remove leading 'id' from the element
+      heroDescr = text.substr(text.indexOf(' ')+1);
+      return heroEle.click();
+    }).then(function() {
+      expect(viewDetailsButtonEle.isDisplayed()).toBe(true, 'viewDetails button should now be visible');
+      return viewDetailsButtonEle.click();
+    }).then(function() {
+      return save(page, heroDescr, '-bar');
+    })
+    .then(function(){
+      return page.myHeroesHref.click();
+    })
+    .then(function() {
+      expect(heroEle.getText()).toContain(heroDescr + '-bar');
+    });
+  });
+
+  function save(page, origValue, textToAdd) {
+    var inputEle = page.heroDetail.element(by.css('input'));
+    expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
+    var saveButtonEle = page.heroDetail.element(by.buttonText('Save'));
+    var backButtonEle = page.heroDetail.element(by.buttonText('Back'));
+    expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
+    var detailTextEle = page.heroDetail.element(by.css('div h2'));
+    expect(detailTextEle.getText()).toContain(origValue);
+    return sendKeys(inputEle, textToAdd).then(function () {
+      expect(detailTextEle.getText()).toContain(origValue + textToAdd);
+      return saveButtonEle.click();
+    });
+  }
+
   it('should be able to see the start screen', function () {
     var page = getPageStruct();
     expect(page.hrefs.count()).toEqual(2, 'should be two dashboard choices');
@@ -98,13 +207,16 @@ describe('Tutorial', function () {
     expect(page.heroDetail.isDisplayed()).toBe(true, 'should be able to see hero-details');
     var inputEle = page.heroDetail.element(by.css('input'));
     expect(inputEle.isDisplayed()).toBe(true, 'should be able to see the input box');
-    var backButtonEle = page.heroDetail.element(by.css('button'));
+    var buttons = page.heroDetail.all(by.css('button'));
+    var backButtonEle = buttons.get(0);
+    var saveButtonEle = buttons.get(1);
     expect(backButtonEle.isDisplayed()).toBe(true, 'should be able to see the back button');
+    expect(saveButtonEle.isDisplayed()).toBe(true, 'should be able to see the save button');
     var detailTextEle = page.heroDetail.element(by.css('div h2'));
     expect(detailTextEle.getText()).toContain(origValue);
     return sendKeys(inputEle, textToAdd).then(function () {
       expect(detailTextEle.getText()).toContain(origValue + textToAdd);
-      return backButtonEle.click();
+      return saveButtonEle.click();
     });
   }
 
diff --git a/public/docs/_examples/toh-6/ts/.gitignore b/public/docs/_examples/toh-6/ts/.gitignore
new file mode 100644
index 0000000000..2cb7d2a2e9
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/.gitignore
@@ -0,0 +1 @@
+**/*.js
diff --git a/public/docs/_examples/tutorial/ts/app/app.component.css b/public/docs/_examples/toh-6/ts/app/app.component.css
similarity index 86%
rename from public/docs/_examples/tutorial/ts/app/app.component.css
rename to public/docs/_examples/toh-6/ts/app/app.component.css
index 246b8c875b..137e9be7be 100644
--- a/public/docs/_examples/tutorial/ts/app/app.component.css
+++ b/public/docs/_examples/toh-6/ts/app/app.component.css
@@ -1,3 +1,15 @@
+/* #docplaster */
+/* #docregion css */
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
 nav a {
   padding: 5px 10px;
   text-decoration: none;
@@ -16,13 +28,4 @@ nav a:hover {
 nav a.router-link-active {
   color: #039be5;
 }
-h1 {
-  font-size: 1.2em;
-  color: #999;
-  margin-bottom: 0;
-}
-h2 {
-  font-size: 2em;
-  margin-top: 0;
-  padding-top: 0;
-}
\ No newline at end of file
+/* #enddocregion css */
diff --git a/public/docs/_examples/toh-6/ts/app/app.component.ts b/public/docs/_examples/toh-6/ts/app/app.component.ts
new file mode 100644
index 0000000000..22317d4403
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/app.component.ts
@@ -0,0 +1,36 @@
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
+
+import { DashboardComponent }  from './dashboard.component';
+import { HeroesComponent }     from './heroes.component';
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroService }         from './hero.service';
+
+@Component({
+  selector: 'my-app',
+
+  template: `
+    <h1>{{title}}</h1>
+    <nav>
+      <a [routerLink]="['Dashboard']">Dashboard</a>
+      <a [routerLink]="['Heroes']">Heroes</a>
+    </nav>
+    <router-outlet></router-outlet>
+  `,
+  styleUrls: ['app/app.component.css'],
+  directives: [ROUTER_DIRECTIVES],
+  providers: [
+    ROUTER_PROVIDERS,
+    HeroService,
+  ]
+})
+@RouteConfig([
+  { path: '/dashboard',  name: 'Dashboard',  component: DashboardComponent, useAsDefault: true },
+  { path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent },
+  { path: '/heroes',     name: 'Heroes',     component: HeroesComponent }
+])
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.css b/public/docs/_examples/toh-6/ts/app/dashboard.component.css
similarity index 94%
rename from public/docs/_examples/tutorial/ts/app/dashboard.component.css
rename to public/docs/_examples/toh-6/ts/app/dashboard.component.css
index d000c0c77e..ce6e963a5f 100644
--- a/public/docs/_examples/tutorial/ts/app/dashboard.component.css
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.css
@@ -1,3 +1,5 @@
+/* #docplaster */
+/* #docregion */
 [class*='col-'] {
   float: left;
 }
@@ -58,3 +60,4 @@ h4 {
 	  min-width: 60px;
 	}
 }
+/* #enddocregion */
diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.html b/public/docs/_examples/toh-6/ts/app/dashboard.component.html
new file mode 100644
index 0000000000..028eab6eb3
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.html
@@ -0,0 +1,11 @@
+<!-- #docregion -->
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+<!-- #docregion click -->
+  <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
+<!-- #enddocregion click -->
+    <div class="module hero">
+      <h4>{{hero.name}}</h4>
+    </div>
+  </div>
+</div>
diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
similarity index 58%
rename from public/docs/_examples/tutorial/ts/app/dashboard.component.ts
rename to public/docs/_examples/toh-6/ts/app/dashboard.component.ts
index f08e40a6e1..6070e76eb6 100644
--- a/public/docs/_examples/tutorial/ts/app/dashboard.component.ts
+++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts
@@ -1,7 +1,9 @@
+// #docplaster
+// #docregion
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router-deprecated';
+import { Router }           from '@angular/router-deprecated';
 
-import { Hero } from './hero';
+import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
 @Component({
@@ -10,12 +12,17 @@ import { HeroService } from './hero.service';
   styleUrls: ['app/dashboard.component.css']
 })
 export class DashboardComponent implements OnInit {
+
   heroes: Hero[] = [];
 
-  constructor(private heroService: HeroService, private _router: Router) { }
+  constructor(
+    private _router: Router,
+    private _heroService: HeroService) {
+  }
 
   ngOnInit() {
-    this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1,5));
+    this._heroService.getHeroes()
+      .then(heroes => this.heroes = heroes.slice(1,5));
   }
 
   gotoDetail(hero: Hero) {
diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.css b/public/docs/_examples/toh-6/ts/app/hero-detail.component.css
similarity index 96%
rename from public/docs/_examples/tutorial/ts/app/hero-detail.component.css
rename to public/docs/_examples/toh-6/ts/app/hero-detail.component.css
index b5ab6e6e0b..ab2437efd8 100644
--- a/public/docs/_examples/tutorial/ts/app/hero-detail.component.css
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.css
@@ -1,3 +1,4 @@
+/* #docregion */
 label {
   display: inline-block;
   width: 3em;
diff --git a/public/docs/_examples/toh-6/ts/app/hero-detail.component.html b/public/docs/_examples/toh-6/ts/app/hero-detail.component.html
new file mode 100644
index 0000000000..f532eb0109
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.html
@@ -0,0 +1,13 @@
+<!-- #docplaster -->
+<!-- #docregion -->
+<div *ngIf="hero">
+  <h2>{{hero.name}} details!</h2>
+  <div>
+    <label>id: </label>{{hero.id}}</div>
+  <div>
+    <label>name: </label>
+    <input [(ngModel)]="hero.name" placeholder="name" />
+   </div>
+  <button (click)="goBack()">Back</button>
+  <button (click)="save()">Save</button>
+</div>
\ No newline at end of file
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
new file mode 100644
index 0000000000..7b2889e592
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero-detail.component.ts
@@ -0,0 +1,53 @@
+// #docplaster
+// #docregion
+import { Component, Input, Output, OnInit, EventEmitter } 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',
+  styleUrls: ['app/hero-detail.component.css']
+})
+export class HeroDetailComponent implements OnInit {
+  @Input() hero: Hero;
+  @Output() close = new EventEmitter();
+  error: any;
+  navigated = false; // true if navigated here
+
+  constructor(
+    private _heroService: HeroService,
+    private _routeParams: RouteParams) {
+  }
+
+  // #docregion ngOnInit
+  ngOnInit() {
+    if (this._routeParams.get('id') !== null) {
+      let id = +this._routeParams.get('id');
+      this.navigated = true;
+      this._heroService.getHero(id)
+          .then(hero => this.hero = hero);
+    } else {
+      this.navigated = false;
+      this.hero = new Hero();
+    }
+  }
+  // #enddocregion ngOnInit
+  // #docregion save
+  save() {
+    this._heroService
+        .save(this.hero)
+        .then(hero => {
+          this.hero = hero; // saved hero, w/ id if new
+          this.goBack(hero);
+        })
+        .catch(error => this.error = error); // TODO: Display error message
+  }
+  // #enddocregion save
+  goBack(savedHero: Hero = null) {
+    this.close.emit(savedHero);
+    if (this.navigated) { window.history.back(); }
+  }
+}
+
diff --git a/public/docs/_examples/toh-6/ts/app/hero.service.ts b/public/docs/_examples/toh-6/ts/app/hero.service.ts
new file mode 100644
index 0000000000..b4b0854141
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero.service.ts
@@ -0,0 +1,99 @@
+// #docplaster
+// #docregion
+import { Injectable }    from '@angular/core';
+import { Http, Headers } from '@angular/http';
+
+// #docregion rxjs
+import 'rxjs/add/operator/toPromise';
+// #enddocregion rxjs
+
+import { Hero } from './hero';
+
+@Injectable()
+export class HeroService {
+
+  private heroesUrl = 'app/heroes';  // URL to web api
+
+  constructor(private http: Http) { }
+
+  // #docregion get-heroes
+  getHeroes(): Promise<Hero[]> {
+    return this.http.get(this.heroesUrl)
+    // #docregion to-promise
+               .toPromise()
+    // #enddocregion to-promise
+    // #docregion to-data
+               .then(response => response.json().data)
+    // #enddocregion to-data
+    // #docregion catch
+               .catch(this.handleError);
+    // #enddocregion catch
+  }
+  // #enddocregion get-heroes
+
+  getHero(id: number) {
+    return this.getHeroes()
+               .then(heroes => heroes.filter(hero => hero.id === id)[0]);
+  }
+
+  // #docregion save
+  save(hero: Hero): Promise<Hero>  {
+    if (hero.id) {
+      return this.put(hero);
+    }
+    return this.post(hero);
+  }
+  // #enddocregion save
+
+  // #docregion delete-hero
+  delete(hero: Hero) {
+    let headers = new Headers();
+    headers.append('Content-Type', 'application/json');
+
+    let url = `${this.heroesUrl}/${hero.id}`;
+
+    return this.http
+               .delete(url, headers)
+               .toPromise()
+               .catch(this.handleError);
+  }
+  // #enddocregion delete-hero
+
+  // #docregion post-hero
+  // Add new Hero
+  private post(hero: Hero): Promise<Hero> {
+    let headers = new Headers({
+      'Content-Type': 'application/json'});
+
+    return this.http
+               .post(this.heroesUrl, JSON.stringify(hero), {headers: headers})
+               .toPromise()
+               .then(res => res.json().data)
+               .catch(this.handleError);
+  }
+  // #enddocregion post-hero
+
+  // #docregion put-hero
+  // Update existing Hero
+  private put(hero: Hero) {
+    let headers = new Headers();
+    headers.append('Content-Type', 'application/json');
+
+    let url = `${this.heroesUrl}/${hero.id}`;
+
+    return this.http
+               .put(url, JSON.stringify(hero), {headers: headers})
+               .toPromise()
+               .then(() => hero)
+               .catch(this.handleError);
+  }
+  // #enddocregion put-hero
+
+  // #docregion error-handler
+  private handleError(error: any) {
+    console.error('An error occurred', error);
+    return Promise.reject(error.message || error);
+  }
+  // #enddocregion error-handler
+}
+// #enddocregion
diff --git a/public/docs/_examples/toh-6/ts/app/hero.ts b/public/docs/_examples/toh-6/ts/app/hero.ts
new file mode 100644
index 0000000000..e3eac516da
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/hero.ts
@@ -0,0 +1,4 @@
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.css b/public/docs/_examples/toh-6/ts/app/heroes.component.css
similarity index 100%
rename from public/docs/_examples/tutorial/ts/app/heroes.component.css
rename to public/docs/_examples/toh-6/ts/app/heroes.component.css
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.html b/public/docs/_examples/toh-6/ts/app/heroes.component.html
new file mode 100644
index 0000000000..705c67677f
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.html
@@ -0,0 +1,26 @@
+<!-- #docregion -->
+<h2>My Heroes</h2>
+<ul class="heroes">
+  <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
+    <span class="hero-element">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </span>
+<!-- #docregion delete-hero -->
+    <button class="delete-button" (click)="delete(hero, $event)">Delete</button>
+<!-- #enddocregion delete-hero -->
+  </li>
+</ul>
+
+<!-- #docregion add-hero -->
+<button (click)="addHero()">Add New Hero</button>
+<div *ngIf="addingHero">
+  <my-hero-detail (close)="close($event)"></my-hero-detail>
+</div>
+<!-- #enddocregion add-hero -->
+
+<div *ngIf="selectedHero">
+  <h2>
+    {{selectedHero.name | uppercase}} is my hero
+  </h2>
+  <button (click)="gotoDetail()">View Details</button>
+</div>
diff --git a/public/docs/_examples/toh-6/ts/app/heroes.component.ts b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
new file mode 100644
index 0000000000..71ce908c60
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/heroes.component.ts
@@ -0,0 +1,71 @@
+// #docregion
+import { Component, OnInit } from '@angular/core';
+import { Router }            from '@angular/router-deprecated';
+
+import { Hero }                from './hero';
+import { HeroService }         from './hero.service';
+// #docregion hero-detail-component
+import { HeroDetailComponent } from './hero-detail.component';
+
+@Component({
+  selector: 'my-heroes',
+  templateUrl: 'app/heroes.component.html',
+  styleUrls:  ['app/heroes.component.css'],
+  directives: [HeroDetailComponent]
+})
+// #enddocregion hero-detail-component
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+  selectedHero: Hero;
+  addingHero = false;
+  error: any;
+
+  constructor(
+    private _router: Router,
+    private _heroService: HeroService) { }
+
+  getHeroes() {
+    this._heroService
+        .getHeroes()
+        .then(heroes => this.heroes = heroes)
+        .catch(error => this.error = error); // TODO: Display error message
+  }
+
+  // #docregion add
+  addHero() {
+    this.addingHero = true;
+    this.selectedHero = null;
+  }
+
+  close(savedHero: Hero) {
+    this.addingHero = false;
+    if (savedHero) { this.getHeroes(); }
+  }
+  // #enddocregion add
+
+  // #docregion delete
+  delete(hero: Hero, event: any) {
+    event.stopPropagation();
+    this._heroService
+        .delete(hero)
+        .then(res => {
+          this.heroes = this.heroes.filter(h => h !== hero);
+          if (this.selectedHero === hero) { this.selectedHero = null; }
+        })
+        .catch(error => this.error = error); // TODO: Display error message
+  }
+  // #enddocregion delete
+
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  onSelect(hero: Hero) {
+    this.selectedHero = hero;
+    this.addingHero = false;
+  }
+
+  gotoDetail() {
+    this._router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
+  }
+}
diff --git a/public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts b/public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts
new file mode 100644
index 0000000000..791b6ae2c5
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/in-memory-data.service.ts
@@ -0,0 +1,18 @@
+// #docregion
+export class InMemoryDataService {
+  createDb() {
+    let heroes = [
+      {id: 11, name: 'Mr. Nice'},
+      {id: 12, name: 'Narco'},
+      {id: 13, name: 'Bombasto'},
+      {id: 14, name: 'Celeritas'},
+      {id: 15, name: 'Magneta'},
+      {id: 16, name: 'RubberMan'},
+      {id: 17, name: 'Dynama'},
+      {id: 18, name: 'Dr IQ'},
+      {id: 19, name: 'Magma'},
+      {id: 20, name: 'Tornado'}
+    ];
+    return {heroes};
+  }
+}
diff --git a/public/docs/_examples/toh-6/ts/app/main.ts b/public/docs/_examples/toh-6/ts/app/main.ts
new file mode 100644
index 0000000000..08caa81826
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/app/main.ts
@@ -0,0 +1,29 @@
+// #docplaster
+// #docregion final
+// Imports for loading & configuring the in-memory web api
+import { provide }    from '@angular/core';
+import { XHRBackend } from '@angular/http';
+
+import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory-web-api/core';
+import { InMemoryDataService }               from './in-memory-data.service';
+
+// The usual bootstrapping imports
+// #docregion v1
+import { bootstrap }      from '@angular/platform-browser-dynamic';
+import { HTTP_PROVIDERS } from '@angular/http';
+
+import { AppComponent }   from './app.component';
+
+// #enddocregion v1, final
+/*
+// #docregion v1
+bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
+// #enddocregion v1
+ */
+// #docregion final
+bootstrap(AppComponent, [
+    HTTP_PROVIDERS,
+    provide(XHRBackend, { useClass: InMemoryBackendService }), // in-mem server
+    provide(SEED_DATA,  { useClass: InMemoryDataService })     // in-mem server data
+]);
+// #enddocregion final
diff --git a/public/docs/_examples/toh-6/ts/example-config.json b/public/docs/_examples/toh-6/ts/example-config.json
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/public/docs/_examples/tutorial/ts/index.html b/public/docs/_examples/toh-6/ts/index.html
similarity index 85%
rename from public/docs/_examples/tutorial/ts/index.html
rename to public/docs/_examples/toh-6/ts/index.html
index ede4eb68e5..b84f744a78 100644
--- a/public/docs/_examples/tutorial/ts/index.html
+++ b/public/docs/_examples/toh-6/ts/index.html
@@ -3,12 +3,13 @@
   <head>
     <base href="/">
     <title>Angular 2 Tour of Heroes</title>
-    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="sample.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/toh-6/ts/plnkr.json b/public/docs/_examples/toh-6/ts/plnkr.json
new file mode 100644
index 0000000000..777d9ad1f1
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/plnkr.json
@@ -0,0 +1,9 @@
+{
+  "description": "Tour of Heroes: Part 6",
+  "files":[
+    "!**/*.d.ts",
+    "!**/*.js",
+    "!**/*.[1,2].*"
+  ],
+  "tags": ["tutorial", "tour", "heroes", "http"]
+}
diff --git a/public/docs/_examples/toh-6/ts/sample.css b/public/docs/_examples/toh-6/ts/sample.css
new file mode 100644
index 0000000000..042f0494f6
--- /dev/null
+++ b/public/docs/_examples/toh-6/ts/sample.css
@@ -0,0 +1,8 @@
+button.delete-button{
+  float:right;
+  background-color: gray !important;
+  color:white;
+}
+
+
+
diff --git a/public/docs/_examples/tutorial/ts/app/app.component.ts b/public/docs/_examples/tutorial/ts/app/app.component.ts
deleted file mode 100644
index 8b0e0ad8da..0000000000
--- a/public/docs/_examples/tutorial/ts/app/app.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Component } from '@angular/core';
-import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
-
-import { HeroesComponent } from './heroes.component';
-import { HeroDetailComponent } from './hero-detail.component';
-import { DashboardComponent } from './dashboard.component';
-import { HeroService } from './hero.service';
-
-@Component({
-  selector: 'my-app',
-  template: `
-    <h1>{{title}}</h1>
-    <nav>
-      <a [routerLink]="['Dashboard']">Dashboard</a>
-      <a [routerLink]="['Heroes']">Heroes</a>
-    </nav>
-    <router-outlet></router-outlet>
-  `,
-  styleUrls: ['app/app.component.css'],
-  directives: [ROUTER_DIRECTIVES],
-  providers: [HeroService]
-})
-@RouteConfig([
-  // {path: '/', redirectTo: ['Dashboard'] },
-  {path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true},
-  {path: '/heroes', name: 'Heroes', component: HeroesComponent},
-  {path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent}
-])
-export class AppComponent {
-  title = 'Tour of Heroes';
-}
diff --git a/public/docs/_examples/tutorial/ts/app/dashboard.component.html b/public/docs/_examples/tutorial/ts/app/dashboard.component.html
deleted file mode 100644
index dfec651c4a..0000000000
--- a/public/docs/_examples/tutorial/ts/app/dashboard.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<h3>Top Heroes</h3>
-<div class="grid grid-pad">
-  <div *ngFor="let hero of heroes" class="col-1-4" (click)="gotoDetail(hero)">
-    <div class="module hero">
-      <h4>{{hero.name}}</h4>
-    </div>
-  </div>
-</div>
diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.html b/public/docs/_examples/tutorial/ts/app/hero-detail.component.html
deleted file mode 100644
index af9039dc9f..0000000000
--- a/public/docs/_examples/tutorial/ts/app/hero-detail.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div *ngIf="hero">
-	<h2>{{hero.name}} details!</h2>
-	<div>
-		<label>id: </label>{{hero.id}}</div>
-	<div>
-		<label>name: </label>
-		<input [(ngModel)]="hero.name" placeholder="name"/>
-	</div>
-	<button (click)="goBack()">Back</button>
-</div>
\ No newline at end of file
diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
deleted file mode 100644
index 0a168944c0..0000000000
--- a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Component, OnInit } 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',
-  styleUrls: ['app/hero-detail.component.css']
-})
-export class HeroDetailComponent implements OnInit {
-  hero: Hero;
-
-  constructor(private heroService: HeroService,
-    private routeParams: RouteParams) {
-  }
-
-  ngOnInit() {
-    let id = +this.routeParams.get('id');
-    this.heroService.getHero(id).then(hero => this.hero = hero);
-  }
-
-  goBack() {
-    window.history.back();
-  }
-}
diff --git a/public/docs/_examples/tutorial/ts/app/hero.service.ts b/public/docs/_examples/tutorial/ts/app/hero.service.ts
deleted file mode 100644
index 7d5c08de07..0000000000
--- a/public/docs/_examples/tutorial/ts/app/hero.service.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { HEROES }     from './mock-heroes';
-
-@Injectable()
-export class HeroService {
-  getHeroes() {
-    return Promise.resolve(HEROES);
-  }
-
-	getHero(id: number) {
-    return Promise.resolve(HEROES).then(
-      heroes => heroes.filter(hero => hero.id === id)[0]
-    );
-  }
-}
diff --git a/public/docs/_examples/tutorial/ts/app/hero.ts b/public/docs/_examples/tutorial/ts/app/hero.ts
deleted file mode 100644
index e94ec6124a..0000000000
--- a/public/docs/_examples/tutorial/ts/app/hero.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export class Hero {
-	id: number;
-	name: string;
-}
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.html b/public/docs/_examples/tutorial/ts/app/heroes.component.html
deleted file mode 100644
index 6a973bb007..0000000000
--- a/public/docs/_examples/tutorial/ts/app/heroes.component.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div>
-  <h2>My Heroes</h2>
-  <ul class="heroes">
-    <li *ngFor="let hero of heroes"
-      [class.selected]="hero === selectedHero"
-      (click)="onSelect(hero)">
-      <span class="badge">{{hero.id}}</span> {{hero.name}}
-    </li>
-  </ul>
-  <div *ngIf="selectedHero">
-    <h2>{{selectedHero.name | uppercase}} is my hero</h2>
-    <button (click)="gotoDetail()">View Details</button>
-  </div>
-</div>
diff --git a/public/docs/_examples/tutorial/ts/app/heroes.component.ts b/public/docs/_examples/tutorial/ts/app/heroes.component.ts
deleted file mode 100644
index 1081aab2bd..0000000000
--- a/public/docs/_examples/tutorial/ts/app/heroes.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router-deprecated';
-import { HeroService } from './hero.service';
-import { HeroDetailComponent } from './hero-detail.component';
-import { Hero } from './hero';
-
-@Component({
-  selector: 'my-heroes',
-  templateUrl: 'app/heroes.component.html',
-  styleUrls: ['app/heroes.component.css'],
-  directives: [HeroDetailComponent]
-})
-export class HeroesComponent implements OnInit {
-  heroes: Hero[];
-  selectedHero: Hero;
-
-  constructor(private heroService: HeroService, private router: Router) { }
-
-  getHeroes() {
-    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
-  }
-
-  gotoDetail() {
-    this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
-  }
-
-  ngOnInit() {
-    this.getHeroes();
-  }
-
-  onSelect(hero: Hero) { this.selectedHero = hero; }
-}
diff --git a/public/docs/_examples/tutorial/ts/app/main.ts b/public/docs/_examples/tutorial/ts/app/main.ts
deleted file mode 100644
index 0e07c5e213..0000000000
--- a/public/docs/_examples/tutorial/ts/app/main.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
-import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
-
-import { HeroService } from './hero.service';
-import { AppComponent } from './app.component';
-
-bootstrap(AppComponent, [
-  ROUTER_PROVIDERS,
-  HeroService
-]);
diff --git a/public/docs/_examples/tutorial/ts/app/mock-heroes.ts b/public/docs/_examples/tutorial/ts/app/mock-heroes.ts
deleted file mode 100644
index 406e5eb7f8..0000000000
--- a/public/docs/_examples/tutorial/ts/app/mock-heroes.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Hero } from './hero';
-
-export var HEROES: Hero[] = [
-	{"id": 11, "name": "Mr. Nice"},
-	{"id": 12, "name": "Narco"},
-	{"id": 13, "name": "Bombasto"},
-	{"id": 14, "name": "Celeritas"},
-	{"id": 15, "name": "Magneta"},
-	{"id": 16, "name": "RubberMan"},
-	{"id": 17, "name": "Dynama"},
-	{"id": 18, "name": "Dr IQ"},
-	{"id": 19, "name": "Magma"},
-	{"id": 20, "name": "Tornado"}
-];
diff --git a/public/docs/_examples/tutorial/ts/plnkr.json b/public/docs/_examples/tutorial/ts/plnkr.json
deleted file mode 100644
index fc4ea3e22c..0000000000
--- a/public/docs/_examples/tutorial/ts/plnkr.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "description": "Tour of Heroes",
-  "files":[
-    "!**/*.d.ts",
-    "!**/*.js"
-  ],
-  "tags": ["tutorial", "tour", "heroes"]
-}
diff --git a/public/docs/_examples/typings.json b/public/docs/_examples/typings.json
index b5324f4199..ab3d27d712 100644
--- a/public/docs/_examples/typings.json
+++ b/public/docs/_examples/typings.json
@@ -1,6 +1,6 @@
 {
   "ambientDependencies": {
-    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
+    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
     "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
     "node": "registry:dt/node#4.0.0+20160509154515"
   }
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html
index b18e37ea87..ff5481a40d 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-bootstrap.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -17,7 +17,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err);  });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
     <script>
     System.import('app/1-2-hybrid-bootstrap/app.module')
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html
index cfba467544..14dfb6ebb4 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-1-2-hybrid-shared-adapter-bootstrap.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -17,7 +17,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err);  });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
     <script>
       System.import('app/1-2-hybrid-shared-adapter-bootstrap/app.module')
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html
index a20c4b4829..03299b89e3 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-projection.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -17,7 +17,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err);  });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
     <script>
       System.import('app/1-to-2-projection/app.module')
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html
index 0b23016ae2..266b8af6a0 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-1-to-2-providers.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -17,7 +17,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err);  });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
     <script>
       System.import('app/1-to-2-providers/app.module')
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html
index dbc5086f47..9ddd676460 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-providers.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -17,7 +17,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err);  });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
     <script>
       System.import('app/2-to-1-providers/app.module')
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html
index 3aca9be8c7..5f1a4de61c 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-2-to-1-transclusion.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -17,7 +17,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err);  });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
     <script>
       System.import('app/2-to-1-transclusion/app.module')
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html
index 0b601e39fa..86544b0587 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-io.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -17,7 +17,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err);  });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
     <script>
       System.import('app/downgrade-io/app.module')
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html
index 87c8fa096c..5193b95c5f 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-downgrade-static.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -17,7 +17,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err);  });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
     <script>
       System.import('app/downgrade-static/app.module')
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html
index 20d18c8034..345cdbeaa6 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-io.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -17,7 +17,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err);  });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
     <script>
       System.import('app/upgrade-io/app.module')
diff --git a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html
index 6912de1722..3d60cbbff2 100644
--- a/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html
+++ b/public/docs/_examples/upgrade-adapter/ts/index-upgrade-static.html
@@ -9,7 +9,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
@@ -17,7 +17,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err);  });
+      System.import('app').catch(function(err){ console.error(err); });
     </script>
     <script>
       System.import('app/upgrade-static/app.module')
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html
index 310d1ab348..34fe7f5f48 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/app/index.html
@@ -12,7 +12,7 @@
   <script src="bower_components/angular-animate/angular-animate.js"></script>
   <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="bower_components/angular-resource/angular-resource.js"></script>
-  <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="../node_modules/core-js/client/shim.min.js"></script>
   <script src="../node_modules/zone.js/dist/zone.js"></script>
   <script src="../node_modules/reflect-metadata/Reflect.js"></script>
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/package.1.json b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/package.1.json
index 501da397e3..8b44d8c13c 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/package.1.json
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/package.1.json
@@ -16,7 +16,7 @@
     "@angular/router-deprecated":  "2.0.0-rc.1",
     "@angular/upgrade":  "2.0.0-rc.1",
 
-    "es6-shim": "^0.35.0",
+    "core-js": "^2.4.0",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12",
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma.conf.1.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma.conf.1.js
index 286c590940..82ad80971b 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma.conf.1.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_components/test/karma.conf.1.js
@@ -12,7 +12,7 @@ module.exports = function(config){
       'app/bower_components/angular-animate/angular-animate.js',
       'app/bower_components/angular-mocks/angular-mocks.js',
       'node_modules/systemjs/dist/system-polyfills.js',
-      'node_modules/es6-shim/es6-shim.js',
+      'node_modules/core-js/client/shim.min.js',
       'node_modules/zone.js/dist/zone.js',
       'node_modules/reflect-metadata/Reflect.js',
       'node_modules/systemjs/dist/system.src.js',
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html
index a1dfd126cf..e556aa9208 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/app/index.html
@@ -8,7 +8,7 @@
   <link rel="stylesheet" href="css/app.css">
   <link rel="stylesheet" href="css/animations.css">
   <!-- #docregion scripts -->
-  <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="../node_modules/core-js/client/shim.min.js"></script>
   <script src="../node_modules/zone.js/dist/zone.js"></script>
   <script src="../node_modules/reflect-metadata/Reflect.js"></script>
   <script src="../node_modules/systemjs/dist/system.src.js"></script>
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/package.1.json b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/package.1.json
index 0f07a065d2..6dcaa62cbd 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/package.1.json
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/package.1.json
@@ -16,7 +16,7 @@
     "@angular/router-deprecated":  "2.0.0-rc.1",
     "@angular/upgrade":  "2.0.0-rc.1",
 
-    "es6-shim": "^0.35.0",
+    "core-js": "^2.4.0",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12",
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma.conf.1.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma.conf.1.js
index 6ca5c40183..2a616cf55d 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma.conf.1.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_final/test/karma.conf.1.js
@@ -6,7 +6,7 @@ module.exports = function(config){
 
     files : [
       'node_modules/systemjs/dist/system-polyfills.js',
-      'node_modules/es6-shim/es6-shim.js',
+      'node_modules/core-js/client/shim.min.js',
       'node_modules/zone.js/dist/zone.js',
       'node_modules/reflect-metadata/Reflect.js',
       'node_modules/systemjs/dist/system.src.js',
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html
index 5a79c8007f..772d06f554 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/app/index.html
@@ -14,7 +14,7 @@
   <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="bower_components/angular-resource/angular-resource.js"></script>
   <!-- #docregion ng2 -->
-  <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="../node_modules/core-js/client/shim.min.js"></script>
   <script src="../node_modules/zone.js/dist/zone.js"></script>
   <script src="../node_modules/reflect-metadata/Reflect.js"></script>
   <!-- #enddocregion ng2 -->
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/package.1.json b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/package.1.json
index 501da397e3..8b44d8c13c 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/package.1.json
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/package.1.json
@@ -16,7 +16,7 @@
     "@angular/router-deprecated":  "2.0.0-rc.1",
     "@angular/upgrade":  "2.0.0-rc.1",
 
-    "es6-shim": "^0.35.0",
+    "core-js": "^2.4.0",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12",
diff --git a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma.conf.1.js b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma.conf.1.js
index a03d582323..f4db40c3ab 100644
--- a/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma.conf.1.js
+++ b/public/docs/_examples/upgrade-phonecat/ts/ng2_initial/test/karma.conf.1.js
@@ -14,7 +14,7 @@ module.exports = function(config){
       'node_modules/systemjs/dist/system-polyfills.js',
       'node_modules/systemjs/dist/system.src.js',
       // #docregion ng2
-      'node_modules/es6-shim/es6-shim.js',
+      'node_modules/core-js/client/shim.min.js',
       'node_modules/zone.js/dist/zone.js',
       'node_modules/reflect-metadata/Reflect.js',
       {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false},
diff --git a/public/docs/_examples/user-input/ts/index.html b/public/docs/_examples/user-input/ts/index.html
index c20f29af88..f72530d64f 100644
--- a/public/docs/_examples/user-input/ts/index.html
+++ b/public/docs/_examples/user-input/ts/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="user-input-styles.css">
 
     <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+    <script src="node_modules/core-js/client/shim.min.js"></script>
 
     <script src="node_modules/zone.js/dist/zone.js"></script>
     <script src="node_modules/reflect-metadata/Reflect.js"></script>
diff --git a/public/docs/_examples/wallaby.js b/public/docs/_examples/wallaby.js
index 2f8c4371bc..7da9b779dd 100644
--- a/public/docs/_examples/wallaby.js
+++ b/public/docs/_examples/wallaby.js
@@ -10,7 +10,7 @@ module.exports = function () {
       {pattern: 'node_modules/systemjs/dist/system.js', instrument: false},
 
       // Polyfills
-      {pattern: 'node_modules/es6-shim/es6-shim.js', instrument: false},
+      {pattern: 'node_modules/code-js/client/shim.min.js', instrument: false},
       {pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', instrument: false},
 
       // Zone.js dependencies
diff --git a/public/docs/_examples/webpack/ts/config/karma-test-shim.js b/public/docs/_examples/webpack/ts/config/karma-test-shim.js
index 7691460bcd..67a2409917 100644
--- a/public/docs/_examples/webpack/ts/config/karma-test-shim.js
+++ b/public/docs/_examples/webpack/ts/config/karma-test-shim.js
@@ -1,7 +1,7 @@
 // #docregion
 Error.stackTraceLimit = Infinity;
 
-require('es6-shim');
+require('core-js/es6');
 require('reflect-metadata');
 
 require('zone.js/dist/zone');
diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json
index 041c0b41e1..618e1867ec 100644
--- a/public/docs/_examples/webpack/ts/package.webpack.json
+++ b/public/docs/_examples/webpack/ts/package.webpack.json
@@ -17,7 +17,7 @@
     "@angular/platform-browser": "2.0.0-rc.1",
     "@angular/platform-browser-dynamic": "2.0.0-rc.1",
     "@angular/router-deprecated": "2.0.0-rc.1",
-    "es6-shim": "^0.35.0",
+    "core-js": "^2.4.0",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12"
diff --git a/public/docs/_examples/webpack/ts/src/polyfills.ts b/public/docs/_examples/webpack/ts/src/polyfills.ts
index 617af577cf..5de11fb502 100644
--- a/public/docs/_examples/webpack/ts/src/polyfills.ts
+++ b/public/docs/_examples/webpack/ts/src/polyfills.ts
@@ -1,5 +1,5 @@
 // #docregion
-import 'es6-shim';
+import 'core-js/es6';
 import 'reflect-metadata';
 require('zone.js/dist/zone');
 
diff --git a/public/docs/_examples/webpack/ts/typings.1.json b/public/docs/_examples/webpack/ts/typings.1.json
index b5324f4199..ab3d27d712 100644
--- a/public/docs/_examples/webpack/ts/typings.1.json
+++ b/public/docs/_examples/webpack/ts/typings.1.json
@@ -1,6 +1,6 @@
 {
   "ambientDependencies": {
-    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
+    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
     "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
     "node": "registry:dt/node#4.0.0+20160509154515"
   }
diff --git a/public/docs/dart/latest/guide/server-communication.jade b/public/docs/dart/latest/guide/server-communication.jade
index 9572a51b0f..0195d5cb88 100644
--- a/public/docs/dart/latest/guide/server-communication.jade
+++ b/public/docs/dart/latest/guide/server-communication.jade
@@ -2,10 +2,40 @@ extends ../../../ts/latest/guide/server-communication.jade
 
 block includes
   include ../_util-fns
+  - var _Http = 'BrowserClient';
+  - var _Angular_Http = 'Dart <code>BrowserClient</code>'
+  - var _httpUrl = 'https://pub.dartlang.org/packages/http'
+  - var _Angular_http_library = 'Dart <a href="!{_httpUrl}"><b>http</b> library</a>'
+
+block demos-list
+  li HTTP client: Tour of Heroes
+  li JSONP client: Wikipedia to fetch data from a service that doesn't support CORS (under development)
+
+block rxjs-import
+  //- N/A
+
+block http-client
+  
+block system-config-of-http
+  //- N/A
 
 block http-providers
-  //- TODO(chalin): mention the Angular transformer resolved_identifiers.
-  //- Maybe not yet at this point in the chapter.
+  :marked
+    Actually, it is unnecessary to include `BrowserClient` in the list of providers.
+    ***But*** as is mentioned in the *Angular 2 Dart Transformer* [wiki page][ng2dtri],
+    the template compiler _generates_ dependency injection code, hence all the
+    identifiers used in DI have to be collected by the Angular 2 transformer
+    so that the libraries containing these identifiers can be transformed.
+
+    Unless special steps are taken, Dart libraries like `http`
+    are not transformed. To ensure that the `BrowserClient` identifier is available
+    for DI, we must add a `resolved_identifiers` parameter to the `angular2`
+    transformer in `pubspec.yaml`:
+
+    [ng2dtri]: https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer#resolved_identifiers
+
+  - var stylePattern = { pnk: /(resolved_identifiers:|Browser.*)/gm, otl: /(- angular2:)|(transformers:)/g };
+  +makeExcerpt('pubspec.yaml', 'transformers', 'pubspec.yaml (transformers)', stylePattern)
 
 block getheroes-and-addhero
   :marked
@@ -20,27 +50,13 @@ block getheroes-and-addhero
     programming in Dart, or the tutorial on 
     [_Asynchronous Programming: Futures_](https://www.dartlang.org/docs/tutorials/futures/).
 
-block http-client-service
-  :marked
-    The imported `BrowserClient` client service gets
-    [injected](dependency-injection.html) into the `HeroService` constructor.
-    Note that `BrowserClient` is not part of the Angular core. 
-    It's an optional service provided by the Dart 
-    [`http` package](https://pub.dartlang.org/packages/http).
-
 block rxjs
   //- N/A
 
-block non-success-status-codes
-  :marked
-    Because a status code outside the 200-299 range _is an error_ from the
-    application point of view, we test for this condition and throw an
-    exception when detected.
-
 block parse-json
   :marked
     The response data are in JSON string form.
-    We must parse that string into JavaScript objects which we do by calling
+    We must parse that string into Objects which we do by calling
     the `JSON.decode()` method from the `dart:convert` library.
 
 block error-handling
@@ -58,14 +74,13 @@ block hero-list-comp-add-hero
     Back in the `HeroListComponent`, we see that *its* `addHero()`
     awaits for the *service's* asynchronous `addHero()` to return, and when it does,
     the new hero is added to the `heroes` list for presentation to the user.
-  +makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'addHero', 'app/toh/hero-list.component.ts (addHero)')(format=".")
 
 block promises
   //- N/A
 
 block wikipedia-jsonp+
   :marked
-    Wikipedia offers both `CORS` and `JSONP` search APIs.
+    Wikipedia offers a modern `CORS` API and a legacy `JSONP` search API.
   .alert.is-important
     :marked
       The remaining content of this section is coming soon.
@@ -77,6 +92,4 @@ block redirect-to-web-api
   :marked
     To achieve this, we have Angular inject an in-memory web API server
     instance as a provider for the `BrowserClient`. This is possible because
-    the in-memory web API server class extends `BrowserClient`. Here are the
-    pertinent details, excerpt from `TohComponent`:
-  +makeExample('server-communication/ts/app/toh/toh.component.ts', 'in-mem-web-api', 'app/toh.component.ts (excerpt)')(format=".")
+    the in-memory web API server class extends `BrowserClient`.
diff --git a/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade b/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade
deleted file mode 100644
index 7c8a0565f7..0000000000
--- a/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade
+++ /dev/null
@@ -1,699 +0,0 @@
-include ../_util-fns
-
-:marked
-    # Routing Around the App
-    We received new requirements for our Tour of Heroes application:
-    * add a *Dashboard* view.
-    * navigate between the *Heroes* and *Dashboard* views.
-    * clicking on a hero in either view navigates to a detail view of the selected hero.
-    * clicking a *deep link* in an email opens the detail view for a particular hero;
-
-    When we’re done, users will be able to navigate the app like this:
-figure.image-display
-    img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations")
-:marked
-    We'll add Angular’s *Component Router* to our app to satisfy these requirements.
-.l-sub-section
-    :marked
-        The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail
-        than we will in this tour.
-:marked
-    [Run the live example](/resources/live-examples/toh-5/ts/plnkr.html).
-.l-sub-section
-    img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
-    :marked
-        To see the URL changes in the browser address bar,
-        pop out the preview window by clicking the blue 'X' button in the upper right corner:
-
-.l-main-section
-:marked
-    ## Where We Left Off
-    Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service
-    and hero detail component. If not, we’ll need to go back and follow the previous chapters.
-
-.filetree
-    .file angular2-tour-of-heroes
-    .children
-        .file lib
-        .children
-            .file app_component.dart
-            .file hero.dart
-            .file hero_detail_component.dart
-            .file hero_service.dart
-            .file mock_heroes.dart
-        .file web
-        .children
-            .file index.html
-            .file main.dart
-            .file styles.css
-        .file pubspec.yaml
-:marked
-    ### Run the app
-    Open a terminal/console window and enter the following command to
-    start the server:
-
-code-example(format="." language="bash").
-    pub serve
-
-:marked
-    The application runs by default on `localhost:8080`.
-
-    ## Action plan
-    Here's our plan
-
-    * turn `AppComponent` into an application shell that only handles navigation.
-    * relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent`
-    * add routing
-    * create a new `DashboardComponent`
-    * tie the *Dashboard* into the navigation structure.
-
-.l-sub-section
-    :marked
-        *Routing* is another name for *navigation*. The *router* is the mechanism for navigating from view to view.
-
-.l-main-section
-:marked
-    ## Splitting the *AppComponent*
-
-    Our current app loads `AppComponent` and immediately displays the list of heroes.
-
-    Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*) and then default to one of them.
-
-    The `AppComponent` should only handle navigation.
-    Let's move the display of *Heroes* out of `AppComponent` and into its own `HeroesComponent`.
-
-    ### *HeroesComponent*
-    `AppComponent` is already dedicated to *Heroes*.
-    Instead of moving anything out of `AppComponent`, we'll just rename it `HeroesComponent`
-    and create a new `AppComponent` shell separately.
-
-    The steps are:
-    * rename `app_component.dart` file to `heroes_component.dart`.
-    * rename the `AppComponent` class to `HeroesComponent`.
-    * rename the selector `my-app` to `my-heroes`.
-
-:marked
-+makeExample('toh-5/dart/lib/heroes_component.dart', 'heroes-component-renaming', 'lib/heroes_component.dart (renaming)')(format=".")
-
-:marked
-    ## Create *AppComponent*
-    The new `AppComponent` will be the application shell.
-    It will have some navigation links at the top and a display area below for the pages we navigate to.
-
-    The initial steps are:
-
-    * create a new file named `app_component.dart`.
-    * define an `AppComponent` class.
-    * expose an application `title` property.
-    * add the `@Component` metadata decorator above the class with a `my-app` selector.
-    * add a template with `<h1>` tags surrounding a binding to the `title` property.
-    * add the `<my-heroes>` tags to the template so we still see the heroes.
-    * add the `HeroesComponent` to the `directives` array so Angular recognizes the `<my-heroes>` tags.
-    * add the `HeroService` to the `providers` array because we'll need it in every other view.
-    * add the supporting `import` statements.
-
-    Our first draft looks like this:
-+makeExample('toh-5/dart/lib/app_component_1.dart', null, 'lib/app_component.dart (v1)')
-:marked
-.callout.is-critical
-    header Remove <i>HeroService</i> from the <i>HeroesComponent</i> providers
-    :marked
-        Go back to the `HeroesComponent` and **remove the `HeroService`** from its `providers` array.
-        We are *promoting* this service from the `HeroesComponent` to the `AppComponent`.
-        We ***do not want two copies*** of this service at two different levels of our app.
-:marked
-    The app still runs and still displays heroes.
-    Our refactoring of `AppComponent` into a new `AppComponent` and a `HeroesComponent` worked!
-    We have done no harm.
-
-:marked
-    ## Add Routing
-
-    We're ready to take the next step.
-    Instead of displaying heroes automatically, we'd like to show them *after* the user clicks a button.
-    In other words, we'd like to navigate to the list of heroes.
-
-    We'll need the Angular *Component Router*.
-
-    ### Include the Router Library
-    Not all apps need routing which is why the Angular *Component Router* is in a separate, optional module library.
-
-//    Our Tour of Heroes needs routing,
-//    so we load the library in the `index.html` in a script tag immediately *after* the angular script itself.
-//makeExample('toh-5/dart/web/index.html', 'router', 'index.html (router)')(format=".")
-:marked
-    While we're in `index.html`, we add `<base href="/">` at the top of the `<head>` section.
-+makeExample('toh-5/dart/web/index.html', 'base-href', 'index.html (base href)')(format=".")
-.callout.is-important
-    header base href is essential
-    :marked
-        See the *base href* section of the [Router](../guide/router.html#!#base-href) chapter to learn why this matters.
-:marked
-    ### Make the router available.
-    The *Component Router* is a service. Like any service, we have to import it and make it
-    available to the application by adding it to the `providers` array.
-
-    The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`),
-    and a configuration decorator (`RouteConfig`). We'll import them all together:
-+makeExample('toh-5/dart/lib/app_component_2.dart', 'import-router', 'app_component.dart (router imports)')(format=".")
-:marked
-    Next we update the `directives` and `providers` metadata arrays to *include* the router assets.
-+makeExample('toh-5/dart/lib/app_component_2.dart', 'directives-and-providers', 'app_component.dart (directives and providers)')(format=".")
-:marked
-    Notice that we also removed the `HeroesComponent` from the `directives` array.
-    `AppComponent` no longer shows heroes; that will be the router's job.
-    We'll soon remove `<my-heroes>` from the template too.
-
-    ### Add and configure the router
-
-    The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig` decorator to simultaneously
-    (a) assign a router to the component and (b) configure that router with *routes*.
-
-    *Routes* tell the router  which views to display when a user clicks a link or
-    pastes a URL into the browser address bar.
-
-    Let's define our first route, a route to the `HeroesComponent`.
-+makeExample('toh-5/dart/lib/app_component_2.dart', 'route-config', 'app_component.dart (RouteConfig for heroes)')(format=".")
-:marked
-    `@RouteConfig` takes an array of *Route* definitions.
-    We have only one route definition at the moment but rest assured, we'll add more.
-
-    This *route definition* has three parts:
-    * **path**: the router matches this route's path to the URL in the browser address bar (`/heroes`).
-
-    * **name**: the official name of the route; it *must* begin with a capital letter to avoid confusion with the *path* (`Heroes`).
-
-    * **component**: the component that the router should create when navigating to this route (`HeroesComponent`).
-
-.l-sub-section
-    :marked
-        Learn more about defining routes with @RouteConfig in the [Routing](../guide/router.html) chapter.
-:marked
-    ### Router Outlet
-
-    If we paste the path, `/heroes`, into the browser address bar,
-    the router should match it to the `'Heroes'` route and display the `HeroesComponent`.
-    But where?
-
-    We have to ***tell it where*** by adding `<router-outlet>` marker tags to the bottom of the template.
-    `RouterOutlet` is one of the `ROUTER_DIRECTIVES`.
-    The router displays each component immediately below the `<router-outlet>` as we navigate through the application.
-
-    ### Router Links
-    We don't really expect users to paste a route URL into the address bar.
-    We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`.
-
-    The revised template looks like this:
-+makeExample('toh-5/dart/lib/app_component_2.dart', 'template', 'app_component.dart (template for Heroes)')(format=".")
-:marked
-    Notice the `[routerLink]` binding in the anchor tag.
-    We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to an array
-    that tells the router where to navigate when the user clicks the link.
-
-    We define a *routing instruction* with a *link parameters array*.
-    The array only has one element in our little sample, the quoted ***name* of the route** to follow.
-    Looking back at the route configuration, we confirm that `'Heroes'` is the name of the route to the `HeroesComponent`.
-.l-sub-section
-    :marked
-        Learn about the *link parameters array* in the [Routing](../guide/router.html#link-parameters-array) chapter.
-:marked
-    Refresh the browser.  We see only the app title. We don't see the heroes list.
-.l-sub-section
-    :marked
-        The browser's address bar shows `/`.
-        The route path to `HeroesComponent` is `/heroes`, not `/`.
-        We don't have a route that matches the path `/`, so there is nothing to show.
-        That's something we'll want to fix.
-:marked
-    We click the "Heroes" navigation link, the browser bar updates to `/heroes`,
-    and now we see the list of heroes. We are navigating at last!
-
-    At this stage, our `AppComponent` looks like this.
-+makeExample('toh-5/dart/lib/app_component_2.dart',null, 'lib/app_component.dart (v2)')
-:marked
-    The  *AppComponent* is now attached to a router and displaying routed views.
-    For this reason and to distinguish it from other kinds of components,
-    we call this type of component a *Router Component*.
-
-
-:marked
-    ## Add a *Dashboard*
-    Routing only makes sense when we have multiple views. We need another view.
-
-    Create a placeholder `DashboardComponent` that gives us something to navigate to and from.
-+makeExample('toh-5/dart/lib/dashboard_component_1.dart',null, 'lib/dashboard_component.dart (v1)')(format=".")
-:marked
-    We’ll come back and make it more useful later.
-
-    ### Configure the dashboard route
-    Go back to `app_component.dart` and teach it to navigate to the dashboard.
-
-    Import the `DashboardComponent` so we can reference it in the dashboard route definition.
-
-    Add the following `'Dashboard'` route definition to the `@RouteConfig` array of definitions.
-+makeExample('toh-5/dart/lib/app_component.dart','dashboard-route', 'app_component.dart (Dashboard Route)')(format=".")
-.l-sub-section
-    :marked
-        **useAsDefault**
-
-        We want the app to show the dashboard when it starts and
-        we want to see a nice URL in the browser address bar that says `/dashboard`.
-        Remember that the browser launches with `/` in the address bar.
-        We don't have a route for that path and we'd rather not create one.
-
-        Fortunately we can add the `useAsDefault: true` property to the *route definition* and the
-        router will display the dashboard when the browser URL doesn't match an existing route.
-:marked
-    Finally, add a dashboard navigation link to the template, just above the *Heroes* link.
-
-+makeExample('toh-5/dart/lib/app_component.dart','template', 'app_component.dart (template)')(format=".")
-.l-sub-section
-    :marked
-        We nestled the two links within `<nav>` tags.
-        They don't do anything yet but they'll be convenient when we style the links a little later in the chapter.
-:marked
-    Refresh the browser. The app displays the dashboard and
-    we can navigate between the dashboard and the heroes.
-
-    ## Dashboard Top Heroes
-    Let’s spice up the dashboard by displaying the top four heroes at a glance.
-
-    Replace the `template` metadata with a `templateUrl` property that points to a new
-    template file.
-
-+makeExample('toh-5/dart/lib/dashboard_component.dart', 'template-url', 'lib/dashboard_component.dart (templateUrl)')(format=".")
-.l-sub-section
-    :marked
-        We specify the path _all the way back to the application root_. Angular doesn't support module-relative paths.
-:marked
-    Create that file with these contents:
-+makeExample('toh-5/dart/lib/dashboard_component.html', null, 'dashboard_component.html')(format=".")
-:marked
-    We use `*ngFor` once again to iterate over a list of heroes and display their names.
-    We added extra `<div>` elements to help with styling later in this chapter.
-
-    There's a `(click)` binding to a `gotoDetail` method we haven't written yet and
-    we're displaying a list of heroes that we don't have.
-    We have work to do, starting with those heroes.
-
-    ### Share the *HeroService*
-
-    We'd like to re-use the `HeroService` to populate the component's `heroes` array.
-
-    Recall earlier in the chapter that we removed the `HeroService` from the `providers` array of the `HeroesComponent`
-    and added it to the `providers` array of the top level `AppComponent`.
-
-    That move created a singleton `HeroService` instance, available to *all* components of the application.
-    We'll inject and use it here in the `DashboardComponent` .
-
-    ### Get heroes
-    Open the `dashboard_component.dart` and add the requisite `import` statements.
-+makeExample('toh-5/dart/lib/dashboard_component_2.dart','imports', 'lib/dashboard_component.dart (imports)')(format=".")
-:marked
-    We need `OnInit` interface because we'll initialize the heroes in the `ngOnInit` method as we've done before.
-    We need the `Hero` and `HeroService` symbols in order to reference those types.
-
-    Now implement the `DashboardComponent` class like this:
-+makeExample('toh-5/dart/lib/dashboard_component_2.dart','component', 'lib/dashboard_component.dart (class)')
-:marked
-    We saw this kind of logic before in the `HeroesComponent`.
-    * create a `heroes` array property
-    * inject the `HeroService` in the constructor and hold it in a private `_heroService` field.
-    * call the service to get heroes inside the Angular `ngOnInit` lifecycle hook.
-
-    The noteworthy differences: we cherry-pick four heroes (2nd, 3rd, 4th, and 5th) with *slice*
-    and stub the `gotoDetail` method until we're ready to implement it.
-
-    Refresh the browser and see four heroes in the new dashboard.
-
-.l-main-section
-:marked
-    ## Navigate to Hero Details
-
-    Although we display the details of a selected hero at the bottom of the `HeroesComponent`,
-    we don't yet *navigate* to the `HeroDetailComponent` in the three ways specified in our requirements:
-    1. from the *Dashboard* to a selected hero.
-    1. from the *Heroes* list to a selected hero.
-    1. from a "deep link" URL pasted into the browser address bar.
-
-    Adding a `'HeroDetail'` route seem an obvious place to start.
-
-    ### Routing to a hero detail
-
-    We'll add a route to the `HeroDetailComponent`  in the `AppComponent` where our other routes are configured.
-
-    The new route is a bit unusual in that we must tell the `HeroDetailComponent` *which hero to show*.
-    We didn't have to tell the `HeroesComponent` or the `DashboardComponent` anything.
-
-    At the moment the parent `HeroesComponent` sets the component's `hero` property to a hero object with a binding like this.
-code-example(format='').
-    &lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
-:marked
-    That clearly won't work in any of our routing scenarios.
-    Certainly not the last one; we can't embed an entire hero object in the URL! Nor would we want to.
-
-    ### Parameterized route
-    We *can* add the hero's `id` to the URL. When routing to the hero whose `id` is 11, we could expect to see an URL such as this:
-code-example(format='').
-    /detail/11
-:marked
-    The `/detail/` part of that URL is constant. The trailing numeric `id` part changes from hero to hero.
-    We need to represent that variable part of the route with a *parameter* (or *token*) that stands for the hero's `id`.
-
-    ### Configure a Route with a Parameter
-
-    Here's the *route definition* we'll use.
-+makeExample('toh-5/dart/lib/app_component.dart','hero-detail-route', 'lib/app_component.dart (Route to HeroDetailComponent)')(format=".")
-:marked
-    The colon (:) in the path indicates that `:id` is a placeholder to be filled with a specific hero `id`
-    when navigating to the `HeroDetailComponent`.
-.l-sub-section
-    :marked
-        Of course we have to import the `HeroDetailComponent` before we create this route:
-    +makeExample('toh-5/dart/lib/app_component.dart','hero-detail-import')(format=".")
-:marked
-    We're finished with the `AppComponent`.
-
-    We won't add a `'Hero Detail'` link to the template because users
-    don't click a navigation *link* to view a particular hero.
-    They click a *hero* whether that hero is displayed on the dashboard or in the heroes list.
-
-    We'll get to those *hero* clicks later in the chapter.
-    There's no point in working on them until the `HeroDetailComponent`
-    is ready to be navigated *to*.
-
-    That will require an `HeroDetailComponent` overhaul.
-
-.l-main-section
-:marked
-    ## Revise the *HeroDetailComponent*
-
-    Before we rewrite the `HeroDetailComponent`, let's remember what it looks like now:
-
-    **[TODO: Add example, once it exists.]**
-
-// makeExample('toh-4/dart/lib/hero_detail_component.dart', null, 'lib/hero_detail_component.dart (current)')
-:marked
-    The template won't change. We'll display a hero the same way. The big changes are driven by how we get the hero.
-
-    We will no longer receive the hero in a parent component property binding.
-    The new `HeroDetailComponent` should take the `id` parameter from the router's `RouteParams` service
-    and use the `HeroService` to fetch the hero with that `id` from storage.
-
-    We need an import statement to reference the `RouteParams`.
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'import-route-params')(format=".")
-:marked
-    We import the `HeroService`so we can fetch a hero`.
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'import-hero-service')(format=".")
-:marked
-    We import the `OnInit` interface because we'll call the `HeroService` inside the `ngOnInit` component lifecycle hook.
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'import-oninit')(format=".")
-:marked
-    We inject the both the `RouteParams` service and the `HeroService` into the constructor as we've done before,
-    making private variables for both:
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'ctor', 'lib/hero_detail_component.dart (constructor)')(format=".")
-:marked
-    Inside the `ngOnInit` lifecycle hook, extract the `id` parameter value from the `RouteParams` service
-    and use the `HeroService` to fetch the hero with that `id`.
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'ng-oninit', 'lib/hero_detail_component.dart (ngOnInit)')(format=".")
-:marked
-    Notice how we extract the `id` by calling the `RouteParams.get` method.
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'get-id')(format=".")
-:marked
-    The hero `id` is a number. Route parameters are *always strings*.
-    So we convert the route parameter value to a number with the `int.parse` static method.
-
-    ### Add *HeroService.getHero*
-    The problem with this bit of code is that `HeroService` doesn't have a `getHero` method!
-    We better fix that quickly before someone notices that we broke the app.
-
-    Open `HeroService` and add the `getHero` method. It's trivial given that we're still faking data access:
-+makeExample('toh-5/dart/lib/hero_service.dart', 'get-hero', 'lib/hero_service.dart (getHero)')(format=".")
-:marked
-    Return to the `HeroDetailComponent` to clean up loose ends.
-
-    ### Find our way back
-
-    We can navigate *to* the `HeroDetailComponent` in several ways.
-    How do we navigate somewhere else when we're done?
-
-    The user could click one of the two links in the `AppComponent`. Or click the browser's back button.
-    We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack
-
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'go-back', 'lib/hero_detail_component.dart (goBack)')(format=".")
-.l-sub-section
-    :marked
-        Going back too far could take us out of the application.
-        That's acceptable in a demo. We'd guard against it in a real application,
-        perhaps with the [*routerCanDeactivate* hook](../api/router/CanDeactivate-interface.html).
-:marked
-    Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template.
-+makeExample('toh-5/dart/lib/hero_detail_component.html', 'back-button')(format=".")
-:marked
-    Modifing the template to add this button spurs us to take one more incremental improvement and migrate the template to its own file
-    called `hero_detail_component.html`
-+makeExample('toh-5/dart/lib/hero_detail_component.html', '', 'lib/hero_detail_component.html')(format=".")
-:marked
-    We update the component metadata with a `templateUrl` pointing to the template file that we just created.
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'template-url', 'lib/hero_detail_component.dart (templateUrl)')(format=".")
-:marked
-    Here's the (nearly) finished `HeroDetailComponent`:
-+makeExample('toh-5/dart/lib/hero_detail_component.dart', 'v2', 'lib/hero_detail_component.dart (latest)')(format=".")
-:marked
-
-
-.l-main-section
-:marked
-    ## Select a *Dashboard* Hero
-    When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero..
-
-    In the dashboard template we bound each hero's click event to the `gotoDetail` method, passing along the selected `hero` entity.
-+makeExample('toh-5/dart/lib/dashboard_component.html','click', 'lib/dashboard_component.html (click binding)')(format=".")
-:marked
-    We stubbed the `gotoDetail` method when we rewrote the `DashboardComponent`.
-    Now we give it a real implementation.
-+makeExample('toh-5/dart/lib/dashboard_component.dart','goto-detail', 'lib/dashboard_component.dart (gotoDetail)')(format=".")
-:marked
-    The `gotoDetail` method navigates in two steps:
-    1. set a route *link parameters array*
-    1. pass the array to the router's navigate method.
-
-    We wrote *link parameters arrays* in the `AppComponent` for the navigation links.
-    Those arrays had only one element, the name of the destination route.
-
-    This array has two elements, the ***name*** of the destination route and a ***route parameter object***
-    with an `id` field set to the value of the selected hero's `id`.
-
-    The two array items align with the ***name*** and ***:id*** token in the parameterized `HeroDetail` route configuration we added to `AppComponent` earlier in the chapter.
-+makeExample('toh-5/dart/lib/app_component.dart','hero-detail-route', 'lib/app_component.dart (hero detail route)')(format=".")
-:marked
-    The `DashboardComponent` doesn't have the router yet. We obtain it in the usual way:
-    `import` the `router` reference and inject it in the constructor (along with the `HeroService`):
-
-+makeExample('toh-5/dart/lib/dashboard_component.dart','import-router', 'lib/dashboard_component.dart (excerpts)')(format=".")
-+makeExample('toh-5/dart/lib/dashboard_component.dart','ctor')(format=".")
-:marked
-    Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
-
-.l-main-section
-:marked
-    ## Select a Hero in the *HeroesComponent*
-    We'll do something similar in the `HeroesComponent`.
-
-    That component's current template exhibits a "master/detail" style with the list of heroes
-    at the top and details of the selected hero below.
-
-    **[TODO: Add example, once it exists.]**
-
-// makeExample('toh-4/dart/lib/app_component.dart','template', 'lib/heroes_component.dart (current template)')(format=".")
-
-:marked
-    Delete the last line of the template with the `<my-hero-detail>` tags.
-
-    We'll no longer show the full `HeroDetailComponent` here.
-    We're going to display the hero detail on its own page and route to it as we did in the dashboard.
-
-    But we'll throw in a small twist for variety.
-    When the user selects a hero from the list, we *won't* go to the detail page.
-    We'll show a *mini-detail* on *this* page instead and make the user click a button to navigate to the *full detail *page.
-
-    ### Add the *mini-detail*
-    Add the following HTML fragment at the bottom of the template where the `<my-hero-detail>` used to be:
-+makeExample('toh-5/dart/lib/heroes_component.html','mini-detail')(format=".")
-:marked
-    After clicking a hero, the user should see something like this below the hero list:
-
-figure.image-display
-    img(src='/resources/images/devguide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70")
-:marked
-    ### Format with the *UpperCasePipe*
-
-    Notice that the hero's name is displayed in CAPITAL LETTERS. That's the effect of the `UpperCasePipe`
-    that we slipped into the interpolation binding. Look for it right after the pipe operator, ( | ).
-+makeExample('toh-5/dart/lib/heroes_component.html','pipe')(format=".")
-:marked
-    Pipes are a good way to format strings, currency amounts, dates and other display data.
-    Angular ships with several pipes and we can write our own.
-.l-sub-section
-    :marked
-        Learn about pipes in the [Pipes](../guide/pipes.html) chapter.
-:marked
-    ### Move content out of the component file
-    We are not done. We still have to update the component class to support navigation to the
-    `HeroDetailComponent` when the user clicks the *View Details* button.
-
-    This component file is really big. Most of it is either template or CSS styles.
-    It's difficult to find the component logic amidst the noise of HTML and CSS.
-
-    Let's migrate the template and the styles to their own files before we make any more changes:
-    1. *Cut-and-paste* the template contents into a new `heroes_component.html` file.
-    1. *Cut-and-paste* the styles contents into a new `heroes_component.css` file.
-    1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
-
-    The revised component data looks like this:
-+makeExample('toh-5/dart/lib/heroes_component.dart', 'metadata', 'lib/heroes_component.dart (revised metadata)')(format=".")
-:marked
-    Now we can see what's going on as we update the component class along the same lines as the dashboard:
-    1. Import the `router`
-    1. Inject the `router` in the constructor (along with the `HeroService`)
-    1. Implement the `gotoDetail` method by calling the `router.navigate` method
-    with a two-part 'HeroDetail' *link parameters array*.
-
-    Here's the revised component class:
-+makeExample('toh-5/dart/lib/heroes_component.dart', 'class', 'lib/heroes_component.dart (class)')
-:marked
-    Refresh the browser and start clicking.
-    We can navigate around the app, from the dashboard to hero details and back,
-    for heroes list to the mini-detail to the hero details and back to the heroes again.
-    We can jump back and forth between the dashboard and the heroes.
-
-    We've met all of the navigational requirements that propelled this chapter.
-
-.l-main-section
-:marked
-    ## Styling the App
-    The app is functional but pretty ugly.
-    Our creative designer team provided some CSS files to make it look better.
-
-    ### A Dashboard with Style
-    The designers think we should display the dashboard heroes in a row of rectangles.
-    They've given us ~60 lines of CSS for this purpose including some simple media queries for responsive design.
-
-    If we paste these ~60 lines into the component `styles` metadata,
-    they'll completely obscure the component logic.
-    Let's not do that. It's easier to edit CSS in a separate `*.css` file anyway.
-
-    Add a `dashboard_component.css` file to the `app` folder and reference
-    that file in the component metadata's `styleUrls` array property like this:
-+makeExample('toh-5/dart/lib/dashboard_component.dart', 'css', 'lib/dashboard_component.dart (styleUrls)')(format=".")
-:marked
-.l-sub-section
-    :marked
-        The `styleUrls` property is an array of style file names (with paths).
-        We could list multiple style files from different locations if we needed them.
-        As with `templateUrl`, we must specify the path _all the way back to the application root_.
-:marked
-    ### Stylish Hero Details
-    The designers also gave us CSS styles specifically for the `HeroDetailComponent`.
-
-    Add a `hero_detail_component.css` to the `app` folder and refer to that file inside
-    the `styleUrls` array as we did for `DashboardComponent`.
-
-    Here's the content for the aforementioned component CSS files.
-+makeTabs(
-`toh-5/dart/lib/hero_detail_component.css,
-toh-5/dart/lib/dashboard_component.css`,
-null,
-`lib/hero_detail_component.css,
-lib/dashboard_component.css`)
-:marked
-    ### Style the Navigation Links
-    The designers gave us CSS to make the navigation links in our `AppComponent` look more like selectable buttons.
-    We cooperated by surrounding those links in `<nav>` tags.
-
-    Add a `app_component.css` file to the `app` folder with the following content.
-+makeExample('toh-5/dart/lib/app_component.css', 'css', 'lib/app_component.css (Navigation Styles)')
-.l-sub-section
-    :marked
-        **The *router-link-active* class**
-
-        The Angular Router adds the `router-link-active` class to the HTML navigation element
-        whose route matches the active route. All we have to do is define the style for it. Sweet!
-:marked
-    Set the `AppComponent`’s `styleUrls` property to this CSS file.
-+makeExample('toh-5/dart/lib/app_component.dart','style-urls', 'lib/app_component.dart (styleUrls)')(format=".")
-:marked
-    ### Global application styles
-    When we add styles to a component, we're keeping everything a component needs
-    &mdash; HTML, the CSS, the code &mdash; together in one convenient place.
-    It's pretty easy to package it all up and re-use the component somewhere else.
-
-    We can also create styles at the *application level* outside of any component.
-
-    Our designers provided some basic styles to apply to elements across the entire app.
-    Add the following to a new file named `styles.css` in the root folder.
-+makeExample('toh-5/ts/styles.1.css', '', 'styles.css (App Styles)')(format=".")
-
-:marked
-    Reference this stylesheet within the `index.html` in the traditional manner.
-+makeExample('toh-5/ts/index.html','css', 'index.html (link ref)')(format=".")
-:marked
-    Look at the app now. Our dashboard, heroes, and navigation links are styling!
-
-figure.image-display
-    img(src='/resources/images/devguide/toh/dashboard-top-heroes.png' alt="View navigations")
-
-.l-main-section
-:marked
-    ## Application structure and code
-
-    Review the sample source code [in the live example for this chapter](/resources/live-examples/toh-5/ts/plnkr.html).
-    Verify that we have the following structure:
-
-.filetree
-    .file angular2-tour-of-heroes
-    .children
-        .file lib
-        .children
-            .file app_component.dart
-            .file app_component.css
-            .file dashboard_component.css
-            .file dashboard_component.html
-            .file dashboard_component.dart
-            .file hero.dart
-            .file hero_detail_component.css
-            .file hero_detail_component.html
-            .file hero_detail_component.dart
-            .file hero_service.dart
-            .file heroes_component.css
-            .file heroes_component.html
-            .file heroes_component.dart
-            .file main.dart
-            .file mock_heroes.dart
-        .file web
-        .children
-            .file main.dart
-            .file index.html
-            .file styles.css
-        .file pubspec.yaml
-:marked
-
-.l-main-section
-:marked
-    ## Recap
-
-    ### The Road Behind
-    We travelled a great distance in this chapter
-    - We added the Angular *Component Router* to navigate among different components.
-    - We learned how to create router links to represent navigation menu items
-    - We used router parameters to navigate to the details of user selected hero
-    - We shared the `HeroService` among multiple components
-    - We moved HTML and CSS out of the component file and into their own files.
-    - We added the `uppercase` pipe to format data
-
-    ### The Road Ahead
-    We have much of the foundation we need to build an application.
-    We're still missing a key piece: remote data access.
-
-    In a forthcoming tutorial chapter,
-    we’ll replace our mock data with data retrieved from a server using http.
diff --git a/public/docs/dart/latest/tutorial/toh-pt5.jade b/public/docs/dart/latest/tutorial/toh-pt5.jade
index 2a7dba70c4..dda232bed8 100644
--- a/public/docs/dart/latest/tutorial/toh-pt5.jade
+++ b/public/docs/dart/latest/tutorial/toh-pt5.jade
@@ -1,14 +1,696 @@
 include ../_util-fns
 
 :marked
-  We're working on the Dart version of this case study.
-  In the meantime, please see these resources:
+    # Routing Around the App
+    We received new requirements for our Tour of Heroes application:
+    * add a *Dashboard* view.
+    * navigate between the *Heroes* and *Dashboard* views.
+    * clicking on a hero in either view navigates to a detail view of the selected hero.
+    * clicking a *deep link* in an email opens the detail view for a particular hero.
 
-  * [Routing](/docs/ts/latest/tutorial/toh-pt5.html):
-    The TypeScript version of this chapter
+    When we’re done, users will be able to navigate the app like this:
+figure.image-display
+    img(src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations")
+:marked
+    We'll add Angular’s *Component Router* to our app to satisfy these requirements.
+.l-sub-section
+    :marked
+        The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail
+        than we will in this tour.
+:marked
+  The complete source code for the example app in this chapter is
+  [in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-5/dart).
 
-  * [Dart source code](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-5/dart):
-    A preliminary Dart version of the Tour of Heroes app,
-    featuring the hero editor, a master/detail page,
-    multiple components, services, and routing
+.l-main-section
+:marked
+    ## Where We Left Off
+    Before we continue with our Tour of Heroes, let’s verify that we have the following structure after adding our hero service
+    and hero detail component. If not, we’ll need to go back and follow the previous chapters.
 
+.filetree
+    .file angular2-tour-of-heroes
+    .children
+        .file lib
+        .children
+            .file app_component.dart
+            .file hero.dart
+            .file hero_detail_component.dart
+            .file hero_service.dart
+            .file mock_heroes.dart
+        .file web
+        .children
+            .file index.html
+            .file main.dart
+            .file styles.css
+        .file pubspec.yaml
+:marked
+  ### Keep the app compiling and running
+  Open a terminal/console window.
+  Start the Dart compiler, watch for changes, and start our server by entering the command:
+
+code-example(format="." language="bash").
+    pub serve
+
+:marked
+  The application runs and updates automatically as we continue to build the Tour of Heroes.
+
+    ## Action plan
+    Here's our plan
+
+    * turn `AppComponent` into an application shell that only handles navigation.
+    * relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent`
+    * add routing
+    * create a new `DashboardComponent`
+    * tie the *Dashboard* into the navigation structure.
+
+.l-sub-section
+    :marked
+        *Routing* is another name for *navigation*. The *router* is the mechanism for navigating from view to view.
+
+.l-main-section
+:marked
+    ## Splitting the *AppComponent*
+
+    Our current app loads `AppComponent` and immediately displays the list of heroes.
+
+    Our revised app should present a shell with a choice of views (*Dashboard* and *Heroes*) and then default to one of them.
+
+    The `AppComponent` should only handle navigation.
+    Let's move the display of *Heroes* out of `AppComponent` and into its own `HeroesComponent`.
+
+    ### *HeroesComponent*
+    `AppComponent` is already dedicated to *Heroes*.
+    Instead of moving anything out of `AppComponent`, we'll just rename it `HeroesComponent`
+    and create a new `AppComponent` shell separately.
+
+    The steps are:
+    * rename `app_component.dart` file to `heroes_component.dart`.
+    * rename the `AppComponent` class to `HeroesComponent`.
+    * rename the selector `my-app` to `my-heroes`.
+
+:marked
++makeExample('toh-5/dart/lib/heroes_component.dart', 'heroes-component-renaming', 'lib/heroes_component.dart (renaming)')(format=".")
+
+:marked
+    ## Create *AppComponent*
+    The new `AppComponent` will be the application shell.
+    It will have some navigation links at the top and a display area below for the pages we navigate to.
+
+    The initial steps are:
+
+    * create a new file named `app_component.dart`.
+    * define an `AppComponent` class.
+    * expose an application `title` property.
+    * add the `@Component` metadata annotation above the class with a `my-app` selector.
+    * add a template with `<h1>` tags surrounding a binding to the `title` property.
+    * add the `<my-heroes>` tags to the template so we still see the heroes.
+    * add the `HeroesComponent` to the `directives` list so Angular recognizes the `<my-heroes>` tags.
+    * add the `HeroService` to the `providers` list because we'll need it in every other view.
+    * add the supporting `import` statements.
+
+    Our first draft looks like this:
++makeExample('toh-5/dart/lib/app_component_1.dart', null, 'lib/app_component.dart (v1)')
+:marked
+.callout.is-critical
+    header Remove <i>HeroService</i> from the <i>HeroesComponent</i> providers
+    :marked
+        Go back to the `HeroesComponent` and **remove the `HeroService`** from its `providers` list.
+        We are *promoting* this service from the `HeroesComponent` to the `AppComponent`.
+        We ***do not want two copies*** of this service at two different levels of our app.
+:marked
+    The app still runs and still displays heroes.
+    Our refactoring of `AppComponent` into a new `AppComponent` and a `HeroesComponent` worked!
+    We have done no harm.
+
+:marked
+    ## Add Routing
+
+    We're ready to take the next step.
+    Instead of displaying heroes automatically, we'd like to show them *after* the user clicks a button.
+    In other words, we'd like to navigate to the list of heroes.
+
+    We'll need the Angular *Component Router*.
+
+    ### Add a base tag
+
+//    Our Tour of Heroes needs routing,
+//    so we load the library in the `index.html` in a script tag immediately *after* the angular script itself.
+//+makeExample('toh-5/dart/web/index.html', 'router', 'index.html (router)')(format=".")
+:marked
+    First, edit `index.html` and add `<base href="/">` at the top of the `<head>` section.
++makeExample('toh-5/dart/web/index.html', 'base-href', 'index.html (base href)')(format=".")
+.callout.is-important
+    header base href is essential
+    :marked
+        See the *base href* section of the [Router](../guide/router.html#!#base-href) chapter to learn why this matters.
+:marked
+    ### Make the router available
+
+    Not all apps need routing, which is why the Angular *Component Router* is in a separate, optional module library.
+
+    The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`),
+    and a configuration annotation (`RouteConfig`). We'll get them all by importing `router.dart`:
++makeExample('toh-5/dart/lib/app_component_2.dart', 'import-router', 'app_component.dart (router imports)')(format=".")
+
+:marked
+    The *Component Router* is a service. Like any service, we have to make it
+    available to the application by adding it to the `providers` list.
+
+    Let's update the `directives` and `providers` metadata lists to *include* the router assets.
++makeExample('toh-5/dart/lib/app_component_2.dart', 'directives-and-providers', 'app_component.dart (directives and providers)')(format=".")
+:marked
+    Notice that we also removed the `HeroesComponent` from the `directives` list.
+    `AppComponent` no longer shows heroes; that will be the router's job.
+    We'll soon remove `<my-heroes>` from the template too.
+
+    ### Add and configure the router
+
+    The `AppComponent` doesn't have a router yet. We'll use the `@RouteConfig` annotation to simultaneously
+    (a) assign a router to the component and (b) configure that router with *routes*.
+
+    *Routes* tell the router  which views to display when a user clicks a link or
+    pastes a URL into the browser address bar.
+
+    Let's define our first route, a route to the `HeroesComponent`.
++makeExample('toh-5/dart/lib/app_component_2.dart', 'route-config', 'app_component.dart (RouteConfig for heroes)')(format=".")
+:marked
+    `@RouteConfig` takes a list of *route definitions*.
+    We have only one route definition at the moment but rest assured, we'll add more.
+
+    This *route definition* has three parts:
+    * **path**: the router matches this route's path to the URL in the browser address bar (`/heroes`).
+
+    * **name**: the official name of the route; it *must* begin with a capital letter to avoid confusion with the *path* (`Heroes`).
+
+    * **component**: the component that the router should create when navigating to this route (`HeroesComponent`).
+
+.l-sub-section
+    :marked
+        Learn more about defining routes with @RouteConfig in the [Routing](../guide/router.html) chapter.
+:marked
+    ### Router Outlet
+
+    If we paste the path, `/heroes`, into the browser address bar,
+    the router should match it to the `'Heroes'` route and display the `HeroesComponent`.
+    But where?
+
+    We have to ***tell it where*** by adding `<router-outlet>` marker tags to the bottom of the template.
+    `RouterOutlet` is one of the `ROUTER_DIRECTIVES`.
+    The router displays each component immediately below the `<router-outlet>` as we navigate through the application.
+
+    ### Router Links
+    We don't really expect users to paste a route URL into the address bar.
+    We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`.
+
+    The revised template looks like this:
++makeExample('toh-5/dart/lib/app_component_2.dart', 'template', 'app_component.dart (template for Heroes)')(format=".")
+:marked
+    Notice the `[routerLink]` binding in the anchor tag.
+    We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to a list
+    that tells the router where to navigate when the user clicks the link.
+
+    We define a *routing instruction* with a *link parameters list*.
+    The list only has one element in our little sample, the quoted ***name* of the route** to follow.
+    Looking back at the route configuration, we confirm that `'Heroes'` is the name of the route to the `HeroesComponent`.
+.l-sub-section
+    :marked
+        Learn about the *link parameters list* in the [Routing](../guide/router.html#link-parameters-array) chapter.
+:marked
+    Refresh the browser.  We see only the app title. We don't see the heroes list.
+.l-sub-section
+    :marked
+        The browser's address bar shows `/`.
+        The route path to `HeroesComponent` is `/heroes`, not `/`.
+        We don't have a route that matches the path `/`, so there is nothing to show.
+        That's something we'll want to fix.
+:marked
+    We click the "Heroes" navigation link, the browser bar updates to `/heroes`,
+    and now we see the list of heroes. We are navigating at last!
+
+    At this stage, our `AppComponent` looks like this.
++makeExample('toh-5/dart/lib/app_component_2.dart',null, 'lib/app_component.dart (v2)')
+:marked
+    The  *AppComponent* is now attached to a router and displaying routed views.
+    For this reason and to distinguish it from other kinds of components,
+    we call this type of component a *Router Component*.
+
+
+:marked
+    ## Add a *Dashboard*
+    Routing only makes sense when we have multiple views. We need another view.
+
+    Create a placeholder `DashboardComponent` that gives us something to navigate to and from.
++makeExample('toh-5/dart/lib/dashboard_component_1.dart',null, 'lib/dashboard_component.dart (v1)')(format=".")
+:marked
+    We’ll come back and make it more useful later.
+
+    ### Configure the dashboard route
+    Go back to `app_component.dart` and teach it to navigate to the dashboard.
+
+    Import the `DashboardComponent` so we can reference it in the dashboard route definition.
+
+    Add the following `'Dashboard'` route definition to the `@RouteConfig` list of definitions.
++makeExample('toh-5/dart/lib/app_component.dart','dashboard-route', 'app_component.dart (Dashboard Route)')(format=".")
+.l-sub-section
+    :marked
+        **useAsDefault**
+
+        We want the app to show the dashboard when it starts and
+        we want to see a nice URL in the browser address bar that says `/dashboard`.
+        Remember that the browser launches with `/` in the address bar.
+        We don't have a route for that path and we'd rather not create one.
+
+        Fortunately we can add the `useAsDefault: true` property to the *route definition* and the
+        router will display the dashboard when the browser URL doesn't match an existing route.
+:marked
+    Finally, add a dashboard navigation link to the template, just above the *Heroes* link.
+
++makeExample('toh-5/dart/lib/app_component.dart','template', 'app_component.dart (template)')(format=".")
+.l-sub-section
+    :marked
+        We nestled the two links within `<nav>` tags.
+        They don't do anything yet but they'll be convenient when we style the links a little later in the chapter.
+:marked
+    Refresh the browser. The app displays the dashboard and
+    we can navigate between the dashboard and the heroes.
+
+    ## Dashboard Top Heroes
+    Let’s spice up the dashboard by displaying the top four heroes at a glance.
+
+    Replace the `template` metadata with a `templateUrl` property that points to a new
+    template file.
+
++makeExample('toh-5/dart/lib/dashboard_component.dart', 'template-url', 'lib/dashboard_component.dart (templateUrl)')(format=".")
+.l-sub-section
+    :marked
+        We specify the path _all the way back to the application root_. Angular doesn't support module-relative paths.
+:marked
+    Create that file with these contents:
++makeExample('toh-5/dart/lib/dashboard_component.html', null, 'dashboard_component.html')(format=".")
+:marked
+    We use `*ngFor` once again to iterate over a list of heroes and display their names.
+    We added extra `<div>` elements to help with styling later in this chapter.
+
+    There's a `(click)` binding to a `gotoDetail` method we haven't written yet and
+    we're displaying a list of heroes that we don't have.
+    We have work to do, starting with those heroes.
+
+    ### Share the *HeroService*
+
+    We'd like to re-use the `HeroService` to populate the component's `heroes` list.
+
+    Recall earlier in the chapter that we removed the `HeroService` from the `providers` list of the `HeroesComponent`
+    and added it to the `providers` list of the top level `AppComponent`.
+
+    That move created a singleton `HeroService` instance, available to *all* components of the application.
+    We'll inject and use it here in the `DashboardComponent` .
+
+    ### Get heroes
+    Open the `dashboard_component.dart` and add the requisite `import` statements.
++makeExample('toh-5/dart/lib/dashboard_component_2.dart','imports', 'lib/dashboard_component.dart (imports)')(format=".")
+:marked
+    We need `OnInit` interface because we'll initialize the heroes in the `ngOnInit` method as we've done before.
+    We need the `Hero` and `HeroService` symbols in order to reference those types.
+
+    Now implement the `DashboardComponent` class like this:
++makeExample('toh-5/dart/lib/dashboard_component_2.dart','component', 'lib/dashboard_component.dart (class)')
+:marked
+    We saw this kind of logic before in the `HeroesComponent`.
+    * create a `heroes` list property
+    * inject the `HeroService` in the constructor and hold it in a private `_heroService` field.
+    * call the service to get heroes inside the Angular `ngOnInit` lifecycle hook.
+
+    The noteworthy differences: we cherry-pick four heroes (2nd, 3rd, 4th, and 5th) with *slice*
+    and stub the `gotoDetail` method until we're ready to implement it.
+
+    Refresh the browser and see four heroes in the new dashboard.
+
+.l-main-section
+:marked
+    ## Navigate to Hero Details
+
+    Although we display the details of a selected hero at the bottom of the `HeroesComponent`,
+    we don't yet *navigate* to the `HeroDetailComponent` in the three ways specified in our requirements:
+    1. from the *Dashboard* to a selected hero.
+    1. from the *Heroes* list to a selected hero.
+    1. from a "deep link" URL pasted into the browser address bar.
+
+    Adding a `'HeroDetail'` route seem an obvious place to start.
+
+    ### Routing to a hero detail
+
+    We'll add a route to the `HeroDetailComponent`  in the `AppComponent` where our other routes are configured.
+
+    The new route is a bit unusual in that we must tell the `HeroDetailComponent` *which hero to show*.
+    We didn't have to tell the `HeroesComponent` or the `DashboardComponent` anything.
+
+    At the moment the parent `HeroesComponent` sets the component's `hero` property to a hero object with a binding like this.
+code-example(format='').
+    &lt;my-hero-detail [hero]="selectedHero">&lt;/my-hero-detail>
+:marked
+    That clearly won't work in any of our routing scenarios.
+    Certainly not the last one; we can't embed an entire hero object in the URL! Nor would we want to.
+
+    ### Parameterized route
+    We *can* add the hero's `id` to the URL. When routing to the hero whose `id` is 11, we could expect to see an URL such as this:
+code-example(format='').
+    /detail/11
+:marked
+    The `/detail/` part of that URL is constant. The trailing numeric `id` part changes from hero to hero.
+    We need to represent that variable part of the route with a *parameter* (or *token*) that stands for the hero's `id`.
+
+    ### Configure a Route with a Parameter
+
+    Here's the *route definition* we'll use.
++makeExample('toh-5/dart/lib/app_component.dart','hero-detail-route', 'lib/app_component.dart (Route to HeroDetailComponent)')(format=".")
+:marked
+    The colon (:) in the path indicates that `:id` is a placeholder to be filled with a specific hero `id`
+    when navigating to the `HeroDetailComponent`.
+.l-sub-section
+    :marked
+        Of course we have to import the `HeroDetailComponent` before we create this route:
+    +makeExample('toh-5/dart/lib/app_component.dart','hero-detail-import')(format=".")
+:marked
+    We're finished with the `AppComponent`.
+
+    We won't add a `'Hero Detail'` link to the template because users
+    don't click a navigation *link* to view a particular hero.
+    They click a *hero* whether that hero is displayed on the dashboard or in the heroes list.
+
+    We'll get to those *hero* clicks later in the chapter.
+    There's no point in working on them until the `HeroDetailComponent`
+    is ready to be navigated *to*.
+
+    That will require an `HeroDetailComponent` overhaul.
+
+.l-main-section
+:marked
+    ## Revise the *HeroDetailComponent*
+
+    Before we rewrite the `HeroDetailComponent`, let's remember what it looks like now:
+
++makeExample('toh-4/dart/lib/hero_detail_component.dart', null, 'lib/hero_detail_component.dart (current)')
+:marked
+    The template won't change. We'll display a hero the same way. The big changes are driven by how we get the hero.
+
+    We will no longer receive the hero in a parent component property binding.
+    The new `HeroDetailComponent` should take the `id` parameter from the router's `RouteParams` service
+    and use the `HeroService` to fetch the hero with that `id` from storage.
+
+    We need an import statement to reference the `RouteParams`.
++makeExample('toh-5/dart/lib/hero_detail_component.dart', 'import-route-params')(format=".")
+:marked
+    We import the `HeroService`so we can fetch a hero`.
++makeExample('toh-5/dart/lib/hero_detail_component.dart', 'import-hero-service')(format=".")
+:marked
+    We import the `OnInit` interface because we'll call the `HeroService` inside the `ngOnInit` component lifecycle hook.
++makeExample('toh-5/dart/lib/hero_detail_component.dart', 'import-oninit')(format=".")
+:marked
+    We inject the both the `RouteParams` service and the `HeroService` into the constructor as we've done before,
+    making private variables for both:
++makeExample('toh-5/dart/lib/hero_detail_component.dart', 'ctor', 'lib/hero_detail_component.dart (constructor)')(format=".")
+:marked
+    Inside the `ngOnInit` lifecycle hook, extract the `id` parameter value from the `RouteParams` service
+    and use the `HeroService` to fetch the hero with that `id`.
++makeExample('toh-5/dart/lib/hero_detail_component.dart', 'ng-oninit', 'lib/hero_detail_component.dart (ngOnInit)')(format=".")
+:marked
+    Notice how we extract the `id` by calling the `RouteParams.get` method.
++makeExample('toh-5/dart/lib/hero_detail_component.dart', 'get-id')(format=".")
+:marked
+    The hero `id` is a number. Route parameters are *always strings*.
+    So we convert the route parameter value to a number with the `int.parse` static method.
+
+    ### Add *HeroService.getHero*
+    The problem with this bit of code is that `HeroService` doesn't have a `getHero` method!
+    We better fix that quickly before someone notices that we broke the app.
+
+    Open `HeroService` and add the `getHero` method. It's trivial given that we're still faking data access:
++makeExample('toh-5/dart/lib/hero_service.dart', 'get-hero', 'lib/hero_service.dart (getHero)')(format=".")
+:marked
+    Return to the `HeroDetailComponent` to clean up loose ends.
+
+    ### Find our way back
+
+    We can navigate *to* the `HeroDetailComponent` in several ways.
+    How do we navigate somewhere else when we're done?
+
+    The user could click one of the two links in the `AppComponent`. Or click the browser's back button.
+    We'll add a third option, a `goBack` method that navigates backward one step in the browser's history stack
+
++makeExample('toh-5/dart/lib/hero_detail_component.dart', 'go-back', 'lib/hero_detail_component.dart (goBack)')(format=".")
+.l-sub-section
+    :marked
+        Going back too far could take us out of the application.
+        That's acceptable in a demo. We'd guard against it in a real application,
+        perhaps with the [*routerCanDeactivate* hook](../api/router/CanDeactivate-interface.html).
+:marked
+    Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template.
++makeExample('toh-5/dart/lib/hero_detail_component.html', 'back-button')(format=".")
+:marked
+    Modifing the template to add this button spurs us to take one more incremental improvement and migrate the template to its own file
+    called `hero_detail_component.html`
++makeExample('toh-5/dart/lib/hero_detail_component.html', '', 'lib/hero_detail_component.html')(format=".")
+:marked
+    We update the component metadata with a `templateUrl` pointing to the template file that we just created.
++makeExample('toh-5/dart/lib/hero_detail_component.dart', 'template-url', 'lib/hero_detail_component.dart (templateUrl)')(format=".")
+:marked
+    Here's the (nearly) finished `HeroDetailComponent`:
++makeExample('toh-5/dart/lib/hero_detail_component.dart', 'v2', 'lib/hero_detail_component.dart (latest)')(format=".")
+:marked
+
+
+.l-main-section
+:marked
+    ## Select a *Dashboard* Hero
+    When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero..
+
+    In the dashboard template we bound each hero's click event to the `gotoDetail` method, passing along the selected `hero` entity.
++makeExample('toh-5/dart/lib/dashboard_component.html','click', 'lib/dashboard_component.html (click binding)')(format=".")
+:marked
+    We stubbed the `gotoDetail` method when we rewrote the `DashboardComponent`.
+    Now we give it a real implementation.
++makeExample('toh-5/dart/lib/dashboard_component.dart','goto-detail', 'lib/dashboard_component.dart (gotoDetail)')(format=".")
+:marked
+    The `gotoDetail` method navigates in two steps:
+    1. set a route *link parameters list*
+    1. pass the list to the router's navigate method.
+
+    We wrote *link parameters lists* in the `AppComponent` for the navigation links.
+    Those lists had only one element, the name of the destination route.
+
+    This list has two elements, the ***name*** of the destination route and a ***route parameter object***
+    with an `id` field set to the value of the selected hero's `id`.
+
+    The two list items align with the ***name*** and ***:id*** token in the parameterized `HeroDetail` route configuration we added to `AppComponent` earlier in the chapter.
++makeExample('toh-5/dart/lib/app_component.dart','hero-detail-route', 'lib/app_component.dart (hero detail route)')(format=".")
+:marked
+    The `DashboardComponent` doesn't have the router yet. We obtain it in the usual way:
+    `import` the `router` reference and inject it in the constructor (along with the `HeroService`):
+
++makeExample('toh-5/dart/lib/dashboard_component.dart','import-router', 'lib/dashboard_component.dart (excerpts)')(format=".")
++makeExample('toh-5/dart/lib/dashboard_component.dart','ctor')(format=".")
+:marked
+    Refresh the browser and select a hero from the dashboard; the app should navigate directly to that hero’s details.
+
+.l-main-section
+:marked
+    ## Select a Hero in the *HeroesComponent*
+    We'll do something similar in the `HeroesComponent`.
+
+    That component's current template exhibits a "master/detail" style with the list of heroes
+    at the top and details of the selected hero below.
+
+    **[TODO: Add example, once it exists.]**
+
+// makeExample('toh-4/dart/lib/app_component.dart','template', 'lib/heroes_component.dart (current template)')(format=".")
+
+:marked
+    Delete the last line of the template with the `<my-hero-detail>` tags.
+
+    We'll no longer show the full `HeroDetailComponent` here.
+    We're going to display the hero detail on its own page and route to it as we did in the dashboard.
+
+    But we'll throw in a small twist for variety.
+    When the user selects a hero from the list, we *won't* go to the detail page.
+    We'll show a *mini-detail* on *this* page instead and make the user click a button to navigate to the *full detail *page.
+
+    ### Add the *mini-detail*
+    Add the following HTML fragment at the bottom of the template where the `<my-hero-detail>` used to be:
++makeExample('toh-5/dart/lib/heroes_component.html','mini-detail')(format=".")
+:marked
+    After clicking a hero, the user should see something like this below the hero list:
+
+figure.image-display
+    img(src='/resources/images/devguide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70")
+:marked
+    ### Format with the *UpperCasePipe*
+
+    Notice that the hero's name is displayed in CAPITAL LETTERS. That's the effect of the `UpperCasePipe`
+    that we slipped into the interpolation binding. Look for it right after the pipe operator, ( | ).
++makeExample('toh-5/dart/lib/heroes_component.html','pipe')(format=".")
+:marked
+    Pipes are a good way to format strings, currency amounts, dates and other display data.
+    Angular ships with several pipes and we can write our own.
+.l-sub-section
+    :marked
+        Learn about pipes in the [Pipes](../guide/pipes.html) chapter.
+:marked
+    ### Move content out of the component file
+    We are not done. We still have to update the component class to support navigation to the
+    `HeroDetailComponent` when the user clicks the *View Details* button.
+
+    This component file is really big. Most of it is either template or CSS styles.
+    It's difficult to find the component logic amidst the noise of HTML and CSS.
+
+    Let's migrate the template and the styles to their own files before we make any more changes:
+    1. *Cut-and-paste* the template contents into a new `heroes_component.html` file.
+    1. *Cut-and-paste* the styles contents into a new `heroes_component.css` file.
+    1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
+
+    The revised component data looks like this:
++makeExample('toh-5/dart/lib/heroes_component.dart', 'metadata', 'lib/heroes_component.dart (revised metadata)')(format=".")
+:marked
+    Now we can see what's going on as we update the component class along the same lines as the dashboard:
+    1. Import the `router`
+    1. Inject the `router` in the constructor (along with the `HeroService`)
+    1. Implement the `gotoDetail` method by calling the `router.navigate` method
+    with a two-part 'HeroDetail' *link parameters list*.
+
+    Here's the revised component class:
++makeExample('toh-5/dart/lib/heroes_component.dart', 'class', 'lib/heroes_component.dart (class)')
+:marked
+    Refresh the browser and start clicking.
+    We can navigate around the app, from the dashboard to hero details and back,
+    for heroes list to the mini-detail to the hero details and back to the heroes again.
+    We can jump back and forth between the dashboard and the heroes.
+
+    We've met all of the navigational requirements that propelled this chapter.
+
+.l-main-section
+:marked
+    ## Styling the App
+    The app is functional but pretty ugly.
+    Our creative designer team provided some CSS files to make it look better.
+
+    ### A Dashboard with Style
+    The designers think we should display the dashboard heroes in a row of rectangles.
+    They've given us ~60 lines of CSS for this purpose including some simple media queries for responsive design.
+
+    If we paste these ~60 lines into the component `styles` metadata,
+    they'll completely obscure the component logic.
+    Let's not do that. It's easier to edit CSS in a separate `*.css` file anyway.
+
+    Add a `dashboard_component.css` file to the `app` folder and reference
+    that file in the component metadata's `styleUrls` list property like this:
++makeExample('toh-5/dart/lib/dashboard_component.dart', 'css', 'lib/dashboard_component.dart (styleUrls)')(format=".")
+:marked
+.l-sub-section
+    :marked
+        The `styleUrls` property is an list of style file names (with paths).
+        We could list multiple style files from different locations if we needed them.
+        As with `templateUrl`, we must specify the path _all the way back to the application root_.
+:marked
+    ### Stylish Hero Details
+    The designers also gave us CSS styles specifically for the `HeroDetailComponent`.
+
+    Add a `hero_detail_component.css` to the `app` folder and refer to that file inside
+    the `styleUrls` list as we did for `DashboardComponent`.
+
+    Here's the content for the aforementioned component CSS files.
++makeTabs(
+`toh-5/dart/lib/hero_detail_component.css,
+toh-5/dart/lib/dashboard_component.css`,
+null,
+`lib/hero_detail_component.css,
+lib/dashboard_component.css`)
+:marked
+    ### Style the Navigation Links
+    The designers gave us CSS to make the navigation links in our `AppComponent` look more like selectable buttons.
+    We cooperated by surrounding those links in `<nav>` tags.
+
+    Add a `app_component.css` file to the `app` folder with the following content.
++makeExample('toh-5/dart/lib/app_component.css', 'css', 'lib/app_component.css (Navigation Styles)')
+.l-sub-section
+    :marked
+        **The *router-link-active* class**
+
+        The Angular Router adds the `router-link-active` class to the HTML navigation element
+        whose route matches the active route. All we have to do is define the style for it. Sweet!
+:marked
+    Set the `AppComponent`’s `styleUrls` property to this CSS file.
++makeExample('toh-5/dart/lib/app_component.dart','style-urls', 'lib/app_component.dart (styleUrls)')(format=".")
+:marked
+    ### Global application styles
+    When we add styles to a component, we're keeping everything a component needs
+    &mdash; HTML, the CSS, the code &mdash; together in one convenient place.
+    It's pretty easy to package it all up and re-use the component somewhere else.
+
+    We can also create styles at the *application level* outside of any component.
+
+    Our designers provided some basic styles to apply to elements across the entire app.
+    Add the following to a new file named `styles.css` in the root folder.
++makeExample('toh-5/ts/styles.1.css', '', 'styles.css (App Styles)')(format=".")
+
+:marked
+    Reference this stylesheet within the `index.html` in the traditional manner.
++makeExample('toh-5/ts/index.html','css', 'index.html (link ref)')(format=".")
+:marked
+    Look at the app now. Our dashboard, heroes, and navigation links are styling!
+
+figure.image-display
+    img(src='/resources/images/devguide/toh/dashboard-top-heroes.png' alt="View navigations")
+
+.l-main-section
+:marked
+    ## Application structure and code
+
+    Review the sample source code [in the live example for this chapter](/resources/live-examples/toh-5/ts/plnkr.html).
+    Verify that we have the following structure:
+
+.filetree
+    .file angular2-tour-of-heroes
+    .children
+        .file lib
+        .children
+            .file app_component.dart
+            .file app_component.css
+            .file dashboard_component.css
+            .file dashboard_component.html
+            .file dashboard_component.dart
+            .file hero.dart
+            .file hero_detail_component.css
+            .file hero_detail_component.html
+            .file hero_detail_component.dart
+            .file hero_service.dart
+            .file heroes_component.css
+            .file heroes_component.html
+            .file heroes_component.dart
+            .file main.dart
+            .file mock_heroes.dart
+        .file web
+        .children
+            .file main.dart
+            .file index.html
+            .file styles.css
+        .file pubspec.yaml
+:marked
+
+.l-main-section
+:marked
+    ## Recap
+
+    ### The Road Behind
+    We travelled a great distance in this chapter
+    - We added the Angular *Component Router* to navigate among different components.
+    - We learned how to create router links to represent navigation menu items
+    - We used router parameters to navigate to the details of user selected hero
+    - We shared the `HeroService` among multiple components
+    - We moved HTML and CSS out of the component file and into their own files.
+    - We added the `uppercase` pipe to format data
+
+    ### The Road Ahead
+    We have much of the foundation we need to build an application.
+    We're still missing a key piece: remote data access.
+
+    In a forthcoming tutorial chapter,
+    we’ll replace our mock data with data retrieved from a server using http.
diff --git a/public/docs/ts/latest/guide/npm-packages.jade b/public/docs/ts/latest/guide/npm-packages.jade
index 2ae1b9fa33..4997eafd28 100644
--- a/public/docs/ts/latest/guide/npm-packages.jade
+++ b/public/docs/ts/latest/guide/npm-packages.jade
@@ -103,7 +103,7 @@ a(id="polyfills")
   :marked
     See "[Why peerDependencies?](#why-peer-dependencies)" below for background on this requirement.
 :marked
-  ***es6-shim*** - monkey patches the global context (window) with essential features of ES2015 (ES6).
+  ***core-js*** - monkey patches the global context (window) with essential features of ES2015 (ES6).
    Developers may substitute an alternative polyfill that provides the same core APIs. 
    This dependency should go away once these APIs are implemented by all supported ever-green browsers.
   
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index f630ac1d07..eea4772a11 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/public/docs/ts/latest/guide/server-communication.jade
@@ -1,5 +1,9 @@
 block includes
   include ../_util-fns
+  - var _Http = 'Http'; // Angular `Http` library name.
+  - var _Angular_Http = 'Angular <code>Http</code>'
+  - var _Angular_http_library = 'Angular HTTP library'
+
 :marked
   [HTTP](https://tools.ietf.org/html/rfc2616) is the primary protocol for browser/server communication.
 .l-sub-section
@@ -16,7 +20,7 @@ block includes
   as we'll learn in this chapter covering:
 
 ul
-  li #[a(href="#http-client") Http client sample overview]
+  li #[a(href="#http-client") HTTP client sample overview]
   li #[a(href="#fetch-data") Fetch data with http.get]
   +ifDocsFor('ts')
     li #[a(href="#rxjs") RxJS Observable of HTTP Responses]
@@ -35,79 +39,110 @@ ul
 p.  
   We illustrate these topics with code that you can 
   #[+liveExampleLink2('run live in a browser', 'server-communication')].
+  
+.l-main-section
+h1 Demos
+p  This chapter describes server communication with the help of the following demos
+ul
+  block demos-list
+    li HTTP client: Tour of Heroes with Observables
+    li HTTP client: Tour of Heroes with #{_Promise}s
+    li JSONP client: Wikipedia to fetch data from a service that doesn't support CORS
+    li JSONP client: Wikipedia using observable operators to reduce server calls
+:marked
+  These demos are orchestrated by the root `AppComponent`
++makeExample('server-communication/ts/app/app.component.ts', null, 'app/app.component.ts')
+
+block rxjs-import
+  :marked
+    There is nothing remarkable here _except_ for the import of RxJS operators.
+  +makeExample('server-communication/ts/app/app.component.ts', 'import-rxjs')(format='.')
+  :marked
+    We'll talk about that [below](#rxjs) when we're ready to explore observables. 
+:marked
+  First, we have to configure our application to use server communication facilities.
+
+.l-main-section
+h1#http-providers Providing HTTP Services
+:marked
+  We use the !{_Angular_Http} client to communicate with a server using a familiar HTTP request/response protocol.
+  The `!{_Http}` client is one of a family of services in the !{_Angular_http_library}.
+block system-config-of-http
+  .l-sub-section
+    :marked
+      SystemJS knows how to load services from the !{_Angular_http_library} when we import from the `@angular/http` module
+      because we registered that module name in the `system.config` file.
+:marked
+    Before we can use the `!{_Http}` client , we'll have to register it as a service provider with the Dependency Injection system.
+.l-sub-section
+  :marked
+    Learn about providers in the [Dependency Injection](dependency-injection.html) chapter.
+
+p In this demo, we register providers in the #[code bootstrap] method of #[code #[+adjExPath('app/main.ts')]].
++makeExample('server-communication/ts/app/main.ts', 'v1', 'app/main.ts (v1)')(format='.')
+
+block http-providers
+  :marked
+    We begin by importing the symbols we need, most of them familiar by now. The newcomer is `HTTP_PROVIDERS`, 
+    a collection of service providers from the Angular HTTP library.
+ 
+    We register HTTP providers in the bootstrap method by passing them in an array as the second parameter after the root component.
+
+    ### Why register in *bootstrap*?
+    
+    We prefer to register application-wide providers in the metadata `providers` array
+    of the root `AppComponent` like this:
+  +makeExample('server-communication/ts/app/app.component.ts','http-providers')(format='.')
+  :marked
+    Here we register the providers in the `bootstrap` method in the `main.ts` file. Why?
+    
+    This is a *sample application* that doesn't talk to a real server.
+    We're going to reconfigure the (typically-hidden) `XhrBackend` service with a fake provider
+    that fetches and saves sample data from an in-memory data store.
+    This replacement service is called the [*in-memory web api*](#in-mem-web-api).
+    
+    Such sleight-of-hand is something the root application component should *not* know about.
+    For this reason, and this reason *only*, we hide it *above* the `AppComponent` in `main.ts`.
 
 .l-main-section
 a#http-client
 :marked
-  ## The *Http* Client Demo
+  # The Tour of Heroes *HTTP* Client Demo
   
-  We use the Angular `Http` client to communicate via `XMLHttpRequest (XHR)`.
-  
-  We'll demonstrate with a mini-version of the [tutorial](../tutorial)'s "Tour of Heroes" (ToH) application.
+  Our first demo is a mini-version of the [tutorial](../tutorial)'s "Tour of Heroes" (ToH) application.
   This version gets some heroes from the server, displays them in a list, lets us add new heroes, and saves them to the server.
-  
+  We use the !{_Angular_Http} client to communicate via `XMLHttpRequest (XHR)`.
+
   It works like this.
 figure.image-display
   img(src='/resources/images/devguide/server-communication/http-toh.gif' alt="ToH mini app" width="250")
 :marked
-  It's implemented with two components &mdash; a parent `TohComponent` shell and the `HeroListComponent` child.
-  We've seen these kinds of component in many other documentation samples. 
-  Let's see how they change to support communication with a server.
-.l-sub-section
-  :marked
-    We're overdoing the "separation of concerns" by creating two components for a tiny demo. 
-    We're making a point about application structure that is easier to justify when the app grows.
-:marked
-  Here is the `TohComponent` shell:
-+makeExample('server-communication/ts/app/toh/toh.component.ts', '', 'app/toh/toh.component.ts')
-
-block http-providers
-  :marked
-    As usual, we import the symbols we need. The newcomer is `HTTP_PROVIDERS`, 
-    an array of service providers from the Angular HTTP library.
-    We'll be using that library to access the server.
-    We also import a `HeroService` that we'll look at shortly.
-
-    The component specifies both the ``HTTP_PROVIDERS` and the `HeroService` in the metadata `providers` array,
-    making them available to the child components of this "Tour of Heroes" application.
-
-  .l-sub-section
-    :marked
-      Alternatively, we may choose to add the `HTTP_PROVIDERS` while bootstrapping the app:
-    +makeExample('server-communication/ts/app/main.ts','http-providers','app/main.ts')(format='.')
-    :marked
-      Learn about providers in the [Dependency Injection](dependency-injection.html) chapter.
-  
-:marked
-  This sample only has one child, the `HeroListComponent`.  Here's its template:
+  This demo has a single component, the `HeroListComponent`.  Here's its template:
 +makeExample('server-communication/ts/app/toh/hero-list.component.html', null, 'app/toh/hero-list.component.html (template)')
 :marked
-  The component template displays a list of heroes with the `ngFor` repeater directive.
-figure.image-display
-  img(src='/resources/images/devguide/server-communication/hero-list.png' alt="Hero List")
-:marked
-  Beneath the heroes is an input box and an *Add Hero* button where we can enter the names of new heroes
+  It presents the list of heroes with an `ngFor`. 
+  Below the list is an input box and an *Add Hero* button where we can enter the names of new heroes
   and add them to the database. 
   We use a [template reference variable](template-syntax.html#ref-vars), `newHeroName`, to access the 
   value of the input box in the `(click)` event binding.
   When the user clicks the button, we pass that value to the component's `addHero` method and then
-  clear it to make ready for a new hero name.
+  clear it to make it ready for a new hero name.
   
   Below the button is an area for an error message.
 
-a(id="oninit")
-a(id="HeroListComponent")
+a#oninit
+a#HeroListComponent
 :marked
-  ### The *HeroListComponent* class
+  ## The *HeroListComponent* class
   Here's the component class:
 +makeExample('server-communication/ts/app/toh/hero-list.component.ts','component', 'app/toh/hero-list.component.ts (class)')  
 :marked
-  We [inject](dependency-injection.html) the `HeroService` into the constructor.
-  That's the instance of the `HeroService` that we provided in the parent shell `TohComponent`.
+  Angular [injects](dependency-injection.html) a `HeroService` into the constructor
+  and the component calls that service to fetch and save data.
 
-  Notice that the component **does not talk to the server directly!** 
+  The component **does not talk directly to the !{_Angular_Http} client**!
   The component doesn't know or care how we get the data. 
-  Those details it delegates to the `heroService` class (which we'll get to in a moment).
+  It delegates to the `HeroService`.
   
   This is a golden rule: **always delegate data access to a supporting service class**.
 
@@ -117,40 +152,39 @@ a(id="HeroListComponent")
   and count on Angular to call `ngOnInit` when it instantiates this component. 
 .l-sub-section
   :marked
-    This is a "best practice". 
+    This is a *best practice*. 
     Components are easier to test and debug when their constructors are simple and all real work 
     (especially calling a remote server) is handled in a separate method.
 block getheroes-and-addhero
   :marked
-    The service's `getHeroes()` and `addHero()` methods return an `Observable` of HTTP hero data.
-    We subscribe to this `Observable`, 
-    specifying the actions to take when the request succeeds or fails. 
-    We'll get to observables and subscription shortly.
+    The service's `getHeroes()` and `addHero()` methods return an `Observable` of hero data that the !{_Angular_Http} client fetched from the server.
+    
+    *Observables* are a big topic, beyond the scope of this chapter. 
+    But we need to know a little about them to appreciate what is going on here.
+    
+    We should think of an `Observable` as a stream of events published by some source.
+    We listen for events in this stream by ***subscribing*** to the `Observable`. 
+    In these subscriptions we specify the actions to take when the web request
+    produces a success event (with the hero data in the event payload) or a fail event (with the error in the payload).
 
 :marked
-  With our basic intuitions about the component squared away, we can turn to development of the backend data source
-  and the client-side `HeroService` that talks to it.
-  
-  ### Fetch data
-  
+  With our basic intuitions about the component squared away, we're ready to look inside the `HeroService`.
+
+.l-main-section
+a#HeroService
+h2#fetch-data Fetch data with the #[b HeroService]
+:marked
   In many of our previous samples we faked the interaction with the server by
   returning mock heroes in a service like this one:
 +makeExample('toh-4/ts/app/hero.service.ts', 'just-get-heroes')(format=".")
 :marked
-  In this chapter, we get the heroes from the server using a (browser-based) HTTP client service.
-  Here's the new `HeroService`: 
-+makeExample('server-communication/ts/app/toh/hero.service.ts', 'v1', 'app/toh/hero.service.ts')
-
-block http-client-service
-  :marked
-    The imported `Http` client service gets
-    [injected](dependency-injection.html) into the `HeroService` constructor.
-  .l-sub-section
-    :marked
-      `Http` is not part of the Angular core. It's an optional service in its own `@angular/http` library
-      that we installed with npm (see the `package.json`) and 
-      registered for module loading by SystemJS (see `systemjs.config.js`)
+  In this chapter, we revise that `HeroService` to get the heroes from the server using the !{_Angular_Http} client service: 
++makeExample('server-communication/ts/app/toh/hero.service.ts', 'v1', 'app/toh/hero.service.ts (revised)')
 
+:marked
+  Notice that the Angular `!{_Http}` client service is
+  [injected](dependency-injection.html) into the `HeroService` constructor.
++makeExample('server-communication/ts/app/toh/hero.service.ts', 'ctor')
 :marked
   Look closely at how we call `#{_priv}http.get`
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get', 'app/toh/hero.service.ts (getHeroes)')(format=".")
@@ -166,7 +200,8 @@ block http-client-service
 block rxjs
   :marked
     <a id="rxjs"></a>
-    The return value may surprise us. Many of us would expect a 
+    The return value may surprise us. 
+    Many of us who are familiar with asynchronous methods in modern JavaScript would expect the `get` method to return a 
     [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
     We'd expect to chain a call to `then()` and extract the heroes.
     Instead we're calling a `map()` method. 
@@ -177,7 +212,7 @@ block rxjs
 
   .l-main-section
   :marked
-    ### RxJS Library
+    # RxJS Library
     [RxJS](https://github.com/ReactiveX/RxJS) ("Reactive Extensions") is a 3rd party library, endorsed by Angular,
     that implements the [*asynchronous observable*](https://www.youtube.com/watch?v=UHI0AzD_WfY "Rob Wormald on observables") pattern.
 
@@ -201,22 +236,25 @@ block rxjs
     While that is the easiest thing to do, we'd pay a penalty in extended launch time and application size
     because the full library is so big. We only use a few operators in our app.
     
-    Instead, we'll import each operator, one-by-one, until we have a custom *Observable* implementation tuned
+    Instead, we'll import each `Observable` operator and static class method, one-by-one, until we have a custom *Observable* implementation tuned
     precisely to our requirements. We'll put the `import` statements in one `app/add-rxjs-operators.ts` file.
-  +makeExample('server-communication/ts/app/add-rxjs-operators.ts', null, 'app/add-rxjs-operators.ts')(format=".")
+  +makeExample('server-communication/ts/app/rxjs-operators.ts', null, 'app/rxjs-operators.ts')(format=".")
   :marked
-    If we forget an operator, the compiler will warn that it's missing and we'll update this file.
+    If we forget an operator, the TypeScript compiler will warn that it's missing and we'll update this file.
   .l-sub-section
     :marked
-      We don't need _all_ of these particular operators in the `HeroService` &mdash; just `map` and `catch`.
-      We'll need the others later, in a *Wiki* example [below](#more-observables).
+      We don't need _all_ of these particular operators in the `HeroService` &mdash; just `map`, `catch` and `throw`.
+      We'll need the other operators later, in a *Wiki* example [below](#more-observables).
   :marked
-    Finally, we import `add-rxjs-operator`_itself_ in our `main.ts`:
-  +makeExample('server-communication/ts/app/main.ts', 'import-rxjs', 'app/main.ts (import rxjs)')(format=".")
-
+    Finally, we import `rxjs-operator`_itself_ in our `app.component.ts`:
+  +makeExample('server-communication/ts/app/app.component.ts', 'import-rxjs', 'app/app.component.ts (import rxjs)')(format=".")
+  :marked
+    Let's return to our study of the `HeroService`.
+    
+l-main-section
 a#extract-data
 :marked
-  ### Process the response object
+  ## Process the response object
   Remember that our `getHeroes()` method mapped the `#{_priv}http.get` response object to heroes with an `#{_priv}extractData` helper method:
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'extract-data', 'app/toh/hero.service.ts (excerpt)')(format=".")
 :marked
@@ -293,8 +331,8 @@ h4 #[b HeroListComponent] error handling
 block hlc-error-handling
   :marked
     Back in the `HeroListComponent`, where we called `#{_priv}heroService.getHeroes()`, 
-    we supply the `subscribe` function with a second function to handle the error message.
-    It sets an `errorMessage` variable which we've bound conditionally in the template.
+    we supply the `subscribe` function with a second function parameter to handle the error message.
+    It sets an `errorMessage` variable which we've bound conditionally in the `HeroListComponent` template.
 
 +makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'getHeroes', 'app/toh/hero-list.component.ts (getHeroes)')(format=".")
   
@@ -370,8 +408,8 @@ code-example(format="." language="javascript").
 block hero-list-comp-add-hero
   :marked
     Back in the `HeroListComponent`, we see that *its* `addHero()` method subscribes to the observable returned by the *service's* `addHero()` method.
-    When the data arrive it pushes the new hero object into its `heroes` array for presentation to the user.
-  +makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'addHero', 'app/toh/hero-list.component.ts (addHero)')(format=".")
+    When the data, arrive it pushes the new hero object into its `heroes` array for presentation to the user.
++makeExample('server-communication/ts/app/toh/hero-list.component.ts', 'addHero', 'app/toh/hero-list.component.ts (addHero)')(format=".")
 
 block promises
   a#promises
@@ -388,9 +426,9 @@ block promises
   :marked
     Let's rewrite the `HeroService` using promises , highlighting just the parts that are different.
   +makeTabs(
-    'server-communication/ts/app/toh/hero.service.1.ts,server-communication/ts/app/toh/hero.service.ts', 
+    'server-communication/ts/app/toh/hero.service.promise.ts,server-communication/ts/app/toh/hero.service.ts', 
     'methods, methods', 
-    'app/toh/hero.service.ts (promise-based), app/toh/hero.service.ts (observable-based)')
+    'app/toh/hero.service.promise.ts (promise-based), app/toh/hero.service.ts (observable-based)')
   :marked
     Converting from an observable to a promise is as simple as calling `toPromise(success, fail)`.
 
@@ -405,9 +443,9 @@ block promises
     We have to adjust the calling component to expect a `Promise` instead of an `Observable`.
 
   +makeTabs(
-    'server-communication/ts/app/toh/hero-list.component.1.ts, server-communication/ts/app/toh/hero-list.component.ts', 
+    'server-communication/ts/app/toh/hero-list.component.promise.ts, server-communication/ts/app/toh/hero-list.component.ts', 
     'methods, methods', 
-    'app/toh/hero-list.component.ts (promise-based), app/toh/hero-list.component.ts (observable-based)')
+    'app/toh/hero-list.component.promise.ts (promise-based), app/toh/hero-list.component.ts (observable-based)')
   :marked
     The only obvious difference is that we call `then` on the returned promise instead of `subscribe`.
     We give both methods the same functional arguments. 
@@ -457,7 +495,7 @@ figure.image-display
 
 block wikipedia-jsonp+
   :marked
-    Wikipedia offers both `CORS` and `JSONP` search APIs, let's use the latter for this example.
+    Wikipedia offers a modern `CORS` API and a legacy `JSONP` search API. Let's use the latter for this example.
     The Angular `Jsonp` service both extends the `Http` service for JSONP and restricts us to `GET` requests. 
     All other HTTP methods throw an error because JSONP is a read-only facility. 
 
@@ -637,7 +675,7 @@ a#in-mem-web-api
   method that returns a map whose keys are collection names and whose values 
   are #{_array}s of objects in those collections.
   
-  Here's the class we created for this sample by copy-and-pasting the JSON data:
+  Here's the class we created for this sample based on the JSON data:
 +makeExample('server-communication/ts/app/hero-data.ts', null, 'app/hero-data.ts')(format=".")
 :marked
   Ensure that the `HeroService` endpoint refers to the web API:
@@ -650,13 +688,10 @@ block redirect-to-web-api
     to a helper service called the `XHRBackend`. 
 
     To enable our server simulation, we replace the default `XHRBackend` service with 
-    the in-memory web API service using standard Angular provider registration
-    in `TohComponent`. We initialize the in-memory web API with mock hero data at the same time.
+    the in-memory web API service using standard Angular provider registration techniques. 
+    We initialize the in-memory web API with *seed data* from the mock hero dataset at the same time.
 
-    Here are the pertinent details, excerpt from `TohComponent`, starting with the imports:
-  +makeExample('server-communication/ts/app/toh/toh.component.ts', 'in-mem-web-api-imports', 'toh.component.ts (web API imports)')(format=".")
-  :marked
-    Then we add the following two provider definitions to the `providers` array in component metadata:
-  +makeExample('server-communication/ts/app/toh/toh.component.ts', 'in-mem-web-api-providers', 'toh.component.ts (web API providers)')(format=".")
+p Here is the revised (and final) version of the #[code #[+adjExPath('app/main.ts')]] demonstrating these steps.
++makeExample('server-communication/ts/app/main.ts', 'final', 'app/main.ts (final)')(format=".")
 
 p See the full source code in the #[+liveExampleLink2('live example', 'server-communication')].
diff --git a/public/docs/ts/latest/guide/typescript-configuration.jade b/public/docs/ts/latest/guide/typescript-configuration.jade
index ad83e66967..affa2b2928 100644
--- a/public/docs/ts/latest/guide/typescript-configuration.jade
+++ b/public/docs/ts/latest/guide/typescript-configuration.jade
@@ -97,7 +97,7 @@ a(id="typings")
 :marked
   We identified three *typings* file in the QuickStart, the *d.ts* files for
   
-  * [es6-shim](https://github.com/paulmillr/es6-shim/blob/master/README.md)
+  * [core-js](https://github.com/zloirock/core-js/blob/master/README.md)
   that brings ES2015/ES6 capabilities to our ES5 browsers
   
   * [jasmine](http://jasmine.github.io/) typings for the Jasmine test framework
@@ -145,7 +145,7 @@ code-example(format="").
     .children
       .file ambient
         .children
-          .file es6-shim
+          .file core-js
           .children
             .file index.d.ts
           .file ...
@@ -155,7 +155,7 @@ code-example(format="").
     .children
       .file ambient
         .children
-          .file es6-shim
+          .file core-js
           .children
             .file index.d.ts
           .file ...            
@@ -163,7 +163,7 @@ code-example(format="").
      .file browser.d.ts
      .file main.d.ts
 :marked
-  The `es6-shim` typings are duplicated and the `browser.d.ts` and `main.d.ts` have overlapping content.
+  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:
diff --git a/public/docs/ts/latest/guide/webpack.jade b/public/docs/ts/latest/guide/webpack.jade
index e931c6b0d7..9231e66b21 100644
--- a/public/docs/ts/latest/guide/webpack.jade
+++ b/public/docs/ts/latest/guide/webpack.jade
@@ -303,7 +303,7 @@ a(id="development-configuration")
   The `HtmlWebpackPlugin` (added in `webpack.common.js`) use the *publicPath* and the *filename* settings to generate 
   appropriate &lt;script&gt; and &lt;link&gt; tags into the `index.html`.
   
-  Our CSS are buried inside our Javascript bundles by deault. The `ExtractTextPlugin` extracts them into
+  Our CSS are buried inside our Javascript bundles by default. The `ExtractTextPlugin` extracts them into
   external `.css` files that the `HtmlWebpackPlugin` inscribes as &lt;link&gt; tags into the `index.html`.
   
   Refer to the Webpack documentation for details on these and other configuation options in this file
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 272850c072..5f7f1a6ba5 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -566,7 +566,7 @@ h2#index 步骤4：添加#[code index.html]
       我们加载下列脚本：
     +makeExcerpt('index.html', 'libraries')
     :marked
-      We begin with es6-shim which monkey patches the global context (window) with essential features of ES2015 (ES6).
+      We begin with `core-js`'s ES2015/ES6 shim which monkey patches the global context (window) with essential features of ES2015 (ES6).
       Next are the polyfills for Angular2, `zone.js` and `reflect-metadata`.
       Then the [SystemJS](#systemjs) library for module loading.
       
diff --git a/public/docs/ts/latest/tutorial/_data.json b/public/docs/ts/latest/tutorial/_data.json
index bcd8fd2697..a1d3f87944 100644
--- a/public/docs/ts/latest/tutorial/_data.json
+++ b/public/docs/ts/latest/tutorial/_data.json
@@ -29,5 +29,10 @@
     "title": "路由",
     "intro": "我们添加一个Angular组件路由，并且学习在视图之间导航",
     "nextable": true
+  },
+  "toh-pt6": {
+    "title": "Http",
+    "intro": "We convert our service and components to use Http",
+    "nextable": true
   }
 }
diff --git a/public/docs/ts/latest/tutorial/index.jade b/public/docs/ts/latest/tutorial/index.jade
index 6d8b033d76..d3f899e19a 100644
--- a/public/docs/ts/latest/tutorial/index.jade
+++ b/public/docs/ts/latest/tutorial/index.jade
@@ -46,10 +46,9 @@ include ../_util-fns
 // #enddocregion intro
 
 :marked
-  [Run the live example](/resources/live-examples/tutorial/ts/plnkr.html)
-  
-  [运行在线例子](/resources/live-examples/tutorial/ts/plnkr.html)
+  [Run the live example](/resources/live-examples/toh-6/ts/plnkr.html)
 
+  [运行在线例子](/resources/live-examples/toh-6/ts/plnkr.html)
 // #docregion main
 .l-main-section
 :marked
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index 7bb08c7a37..3ea8a2a58d 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -917,10 +917,18 @@ figure.image-display
   1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
   1. *设置*组件元数据的`templateUrl`和`styleUrls`属性，来分别引用这两个文件。
   
-  The revised component data looks like this:
+  We no longer display the `HeroDetailComponent` in the `HeroesComponent` template because we're navigating to it.
+  So we can remove it from the metadata `directives` array. The `directives` array is now empty so we delete it.
+  We might as well delete the `HeroDetailComponent` import statement too.
+  
+  在`HeroesComponent`模板中，不需要再显示`HeroDetailComponent`，因为我们要导航到它。
+  所以我们可以从元数据的`directives`数组中移除它。`directives`数组现在没东西了，因此我们也把它删掉。
+  我们也同样可以删掉`import` `HeroDetailComponent`的语句。
+  
+  The revised component metadata looks like this:
   
   修改过的组件数据是这样的：
-+makeExample('toh-5/ts/app/heroes.component.ts', 'metadata', 'app/heroes.component.ts (修改过的元数据)')(format=".")
++makeExample('toh-5/ts/app/heroes.component.ts', 'metadata', 'app/heroes.component.ts (revised metadata)')(format=".")
 :marked
   Now we can see what's going on as we update the component class along the same lines as the dashboard:
   
@@ -1110,6 +1118,7 @@ figure.image-display
     .file index.html
     .file package.json
     .file styles.css
+    .file systemjs.config.json
     .file tsconfig.json
     .file typings.json
 :marked
diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade
new file mode 100644
index 0000000000..fd994476a1
--- /dev/null
+++ b/public/docs/ts/latest/tutorial/toh-pt6.jade
@@ -0,0 +1,362 @@
+include ../_util-fns
+
+:marked
+  # Getting and Saving Data with HTTP
+  
+  Our stakeholders appreciate our progress. 
+  Now they want to get the hero data from a server, let users add, edit, and delete heroes,
+  and save these changes back to the server.
+  
+  In this chapter we teach our application to make the corresponding http calls to a remote server's web api.
+:marked
+  [Run the live example](/resources/live-examples/toh-6/ts/plnkr.html).   
+  
+.l-main-section
+:marked
+  ## Where We Left Off
+  In the [previous chapter](toh-pt5.html), we learned to navigate between the dashboard and the fixed heroes list, editing a selected hero along the way.
+  That's our starting point for this chapter.
+
+  ### Keep the app transpiling and running
+  Open a terminal/console window and enter the following command to
+  start the TypeScript compiler, start the server, and watch for changes:
+
+code-example(format="." language="bash").
+  npm start
+
+:marked
+  The application runs and updates automatically as we continue to build the Tour of Heroes.
+
+.l-main-section  
+:marked
+ ## Prepare for Http
+  
+  `Http` is ***not*** a core Angular module. 
+  It's Angular's optional approach to web access and it exists as a separate add-on module called `@angular/http`,
+  shipped in a separate script file as part of the Angular npm package. 
+  
+  Fortunately we're ready to import from `@angular/http` because `systemjs.config` configured *SystemJS* to load that library when we need it.
+
+:marked
+  ### Register (provide) *http* services
+  Our app will depend upon the Angular `http` service which itself depends upon other supporting services.
+  The `HTTP_PROVIDERS` array from `@angular/http` library holds providers for the complete set of http services.
+  
+  We should be able to access these services from anywhere in the application.
+  So we register them in the `bootstrap` method of `main.ts` where we
+  launch the application and its root `AppComponent`.
+  
++makeExample('toh-6/ts/app/main.ts','v1','app/main.ts (v1)')(format='.')
+:marked
+  Notice that we supply the `HTTP_PROVIDERS` in an array as the second parameter to the `bootstrap` method.
+  This has the same effect the `providers` array in `@Component` metadata.
+
+.l-main-section
+:marked
+  ## Simulating the web api
+
+  We generally recommend registering application-wide services in the root `AppComponent` *providers*.
+  Here we're registering in `main` for a special reason.
+  
+  Our application is in the early stages of development and far from ready for production. 
+  We don't even have a web server that can handle requests for heroes.
+  Until we do, *we'll have to fake it*.
+  
+  We're going to *trick* the http client into fetching and saving data from
+  a demo/development service, the *in-memory web api*.
+  
+  The application itself doesn't need to know and shouldn't know about this.
+  So we'll slip the *in-memory web api* into the configuration *above* the `AppComponent`.
+  
+  Here is a version of `main` that performs this trick
++makeExample('toh-6/ts/app/main.ts', 'final', 'app/main.ts (final)')(format=".")  
+
+:marked
+  We're replacing the default `XHRBackend`, the service that talks to the remote server,
+  with the *in-memory web api* service after priming it with the following `in-memory-data.service.ts` file:
++makeExample('toh-6/ts/app/in-memory-data.service.ts', null, 'app/in-memory-data.service.ts')(format=".")
+:marked
+  This file replaces the `mock-heroes.ts` which is now safe to delete.
+
+.alert.is-helpful
+  :marked
+    This chaper is an introduction to the Angular http client.
+    Please don't be distracted by the details of this backend substitution. Just follow along with the example. 
+    
+    Learn more later about the *in-memory web api* in the [Http chapter](../guide/server-communication.html#!#in-mem-web-api).
+    Remember, the *in-memory web api* is only useful in the early stages of development and for demonstrations such as this Tour of Heroes. 
+    Skip it when you have a real web api server.
+
+
+.l-main-section
+:marked
+  ## Heroes and Http
+  
+  Look at our current `HeroService` implementation
++makeExample('toh-4/ts/app/hero.service.ts', 'get-heroes', 'app/hero.service.ts (getHeroes - old)')(format=".")
+:marked
+  We returned a promise resolved with mock heroes. 
+  It may have seemed like overkill at the time, but we were anticipating the
+  day when we fetched heroes with an http client and we knew that would have to be an asynchronous operation.
+  
+  That day has arrived! Let's convert `getHeroes()` to use Angular's `Http` client:
+  
++makeExample('toh-6/ts/app/hero.service.ts', 'get-heroes', 'app/hero.service.ts (getHeroes using Http)')(format=".")
+  
+:marked
+  ### Http Promise
+
+  We're still returning a promise but we're creating it differently.
+  
+  The Angular `http.get` returns an RxJS `Observable`.
+  *Observables* are a powerful way to manage asynchronous data flows.
+  We'll learn about `Observables` *later*.
+  
+  For *now* we get back on familiar ground by immediately converting that `Observable` to a `Promise` using the `toPromise` operator.
++makeExample('toh-6/ts/app/hero.service.ts', 'to-promise')(format=".")
+:marked
+  Unfortunately, the Angular `Observable` doesn't have a `toPromise` operator ... not out of the box.
+  The Angular `Observable` is a bare-bones implementation. 
+  
+  There are scores of operators like `toPromise` that extend `Observable` with useful capabilities.
+  If we want those capabilities, we have to add the operators ourselves.
+  That's as easy as importing them from the RxJS library like this:
++makeExample('toh-6/ts/app/hero.service.ts', 'rxjs')(format=".")
+
+:marked
+  ### Extracting the data in the *then* callback 
+  In the *promise*'s `then` callback we call the `json` method of the http `Response` to extract the
+  data within the response.
++makeExample('toh-6/ts/app/hero.service.ts', 'to-data')(format=".")
+:marked
+  That object returned by `json` has a single `data` property. 
+  The `data` property holds the array of *heroes* that the caller really wants.
+  So we grab that array and return it as the resolved promise value.
+
+.alert.is-important
+  :marked
+    Pay close attention to the shape of the data returned by the server.
+    This particular *in-memory web api* example happens to return an object with a `data` property.
+    Your api might return something else.
+    
+    Adjust the code to match *your web api*. 
+:marked
+  The caller is unaware of these machinations. It receives a promise of *heroes* just as it did before. 
+  It has no idea that we fetched the heroes from the server.
+  It knows nothing of the twists and turns required to turn the http response into heroes.
+  Such is the beauty and purpose of delegating data access to a service like this `HeroService`.
+:marked
+  ### Error Handling
+  
+  At the end of `getHeroes` we `catch` server failures and pass them to an error handler:
++makeExample('toh-6/ts/app/hero.service.ts', 'catch')(format=".")
+:marked
+  This is a critical step! 
+  We must anticipate http failures as they happen frequently for reasons beyond our control.
+
++makeExample('toh-6/ts/app/hero.service.ts', 'error-handler', 'app/hero.service.ts (Error handler)')(format=".")
+:marked
+  In this demo service we log the error to the console; we should do better in real life.
+
+  We've also decided to return a user friendly form of the error to
+  to the caller in a rejected promise so that the caller can display a proper error message to the user.
+  
+  ### Promises are Promises
+  Although we made significant *internal* changes to `getHeroes()`, the public signature did not change. 
+  We still return a promise. We won't have to update any of the components that call `getHeroes()`.
+
+.l-main-section   
+:marked
+  ## Add, Edit, Delete
+  
+  Our stakeholders are incredibly pleased with the added flexibility from the api integration, but it doesn't stop there. Next we want to add the capability to add, edit and delete heroes.   
+  
+  We'll complete `HeroService` by creating `post`, `put` and `delete` http calls to meet our new requirements. 
+
+:marked
+  ### Post
+  
+  We are using `post` to add new heroes. Post requests require a little bit more setup than Get requests, but the format is as follows:
+  
++makeExample('toh-6/ts/app/hero.service.ts', 'post-hero', 'app/hero.service.ts (post hero)')(format=".")
+
+:marked
+  Now we create a header and set the content type to `application/json`. We'll call `JSON.stringify` before we post to convert the hero object to a string.  
+  
+  ### Put
+  
+  `put` is used to edit a specific hero, but the structure is very similar to a `post` request. The only difference is that we have to change the url slightly by appending the id of the hero we want to edit.
+
++makeExample('toh-6/ts/app/hero.service.ts', 'put-hero', 'app/hero.service.ts (put hero)')(format=".")
+
+:marked
+  ### Delete
+  `delete` is used to delete heroes and the format is identical to `put` except for the function name. 
+
++makeExample('toh-6/ts/app/hero.service.ts', 'delete-hero', 'app/hero.service.ts (delete hero)')(format=".")
+
+:marked
+  We add a `catch` to handle our errors for all three cases.
+  
+: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.
+
++makeExample('toh-6/ts/app/hero.service.ts', 'save', 'app/hero.service.ts (save hero)')(format=".")
+    
+:marked
+  After these additions our `HeroService` looks like this:
+
++makeExample('toh-6/ts/app/hero.service.ts', null, 'app/hero.service.ts')(format=".")
+
+.l-main-section
+:marked
+  ## Updating Components
+  
+  Loading heroes using `Http` required no changes outside of `HeroService`, but we added a few new features as well. 
+  In the following section we will update our components to use our new methods to add, edit and delete heroes.
+  
+  ### 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=".")     
+
+: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=".")  
+
+: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.     
+
+.l-sub-section
+  :marked
+    The `emit` "handshake" between `HeroDetailComponent` and `HeroesComponent` is an example of component to component communication. This is a topic for another day, but we have detailed information in our <a href="/docs/ts/latest/cookbook/component-communication.html#!#child-to-parent">Component Interaction Cookbook</a>  
+
+:marked
+  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") 
+
+:marked
+  ### Add/Delete in the *HeroesComponent*
+  
+  The user can *add* a new hero by clicking a button and entering a name.
+
+  When the user clicks the *Add New Hero* button, we display the `HeroDetailComponent`.
+  We aren't navigating to the component so it won't receive a hero `id`;
+  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=".")  
+: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=".")  
+
+:marked
+  Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions in the template.
+  Let's start with *add*.
+  
+  We're using the `HeroDetailComponent` to capture the new hero information.
+  We have to tell Angular about that by importing the `HeroDetailComponent` and referencing it in the component metadata `directives` array.
++makeExample('toh-6/ts/app/heroes.component.ts', 'hero-detail-component', 'app/heroes.component.ts (HeroDetailComponent)')(format=".")  
+.l-sub-section
+  :marked
+    These are the same lines that we removed in the previous [Routing](toh-pt5.html) chapter.
+    We didn't know at the time that we'd need the *HeroDetailComponent* again. So we tidied up.
+    
+    Now we *must* put these lines back. If we don't, Angular will ignore the `<my-hero-detail>`
+    tag and pushing the *Add New Hero* button will have no visible effect.
+:marked
+  Next we implement the click handler for the *Add New Hero* button.
+
++makeExample('toh-6/ts/app/heroes.component.ts', 'add', 'app/heroes.component.ts (add)')(format=".")  
+:marked
+  The `HeroDetailComponent` does most of the work. All we do is toggle an `*ngIf` flag that
+  swaps it into the DOM when were add a hero and remove it from the DOM when the user is done.
+  
+  The *delete* logic is a bit trickier.
++makeExample('toh-6/ts/app/heroes.component.ts', 'delete', 'app/heroes.component.ts (delete)')(format=".")
+
+:marked
+  Of course we delegate the persistence of hero deletion to the `HeroService`. 
+  But the component is still responsible for updating the display.
+  So the *delete* method removes the deleted hero from the list.
+
+:marked
+  ### Let's see it
+  Here are the fruits of labor in action:
+figure.image-display
+  img(src='/resources/images/devguide/toh/toh-http.anim.gif' alt="Heroes List Editting w/ HTTP")  
+
+:marked
+  ### Review the App Structure
+  Let’s verify that we have the following structure after all of our good refactoring in this chapter:
+  
+.filetree
+  .file angular2-tour-of-heroes
+  .children
+  .file app
+  .children
+    .file app.component.ts
+    .file app.component.css
+    .file dashboard.component.css
+    .file dashboard.component.html
+    .file dashboard.component.ts
+    .file hero.ts
+    .file hero-detail.component.css
+    .file hero-detail.component.html
+    .file hero-detail.component.ts
+    .file hero.service.ts
+    .file heroes.component.css
+    .file heroes.component.html
+    .file heroes.component.ts
+    .file main.ts
+    .file hero-data.service.ts
+  .file node_modules ...
+  .file typings ...
+  .file index.html
+  .file package.json
+  .file styles.css
+  .file sample.css
+  .file systemjs.config.json
+  .file tsconfig.json
+  .file typings.json
+ 
+.l-main-section    
+:marked
+    ## Home Stretch
+    
+    We are at the end of our journey for now, but we have accomplished a lot.
+    - We added the necessary dependencies to use Http in our application.
+    - We refactored HeroService to load heroes from an api.
+    - We extended HeroService to support post, put and delete calls.
+    - We updated our components to allow adding, editing and deleting of heroes.
+    - We configured an in-memory web api.
+    
+    Below is a summary of the files we changed.
+    
++makeTabs(
+  `toh-6/ts/app/app.component.ts,
+   toh-6/ts/app/heroes.component.ts,
+   toh-6/ts/app/heroes.component.html,
+   toh-6/ts/app/hero-detail.component.ts,
+   toh-6/ts/app/hero-detail.component.html,
+   toh-6/ts/app/hero.service.ts`,
+  null,
+  `app.comp...ts,
+   heroes.comp...ts,
+   heroes.comp...html,
+   hero-detail.comp...ts,
+   hero-detail.comp...html,
+   hero.service.ts`
+) 
+
diff --git a/public/resources/images/devguide/toh/hero-details-save-button.png b/public/resources/images/devguide/toh/hero-details-save-button.png
new file mode 100644
index 0000000000..91c201a310
Binary files /dev/null and b/public/resources/images/devguide/toh/hero-details-save-button.png differ
diff --git a/public/resources/images/devguide/toh/heroes-list-delete-button.png b/public/resources/images/devguide/toh/heroes-list-delete-button.png
new file mode 100644
index 0000000000..da87a20e4a
Binary files /dev/null and b/public/resources/images/devguide/toh/heroes-list-delete-button.png differ
diff --git a/public/resources/images/devguide/toh/toh-http.anim.gif b/public/resources/images/devguide/toh/toh-http.anim.gif
new file mode 100644
index 0000000000..a11eb3e5a5
Binary files /dev/null and b/public/resources/images/devguide/toh/toh-http.anim.gif differ
diff --git a/tools/api-builder/angular.io-package/index.js b/tools/api-builder/angular.io-package/index.js
index add8a222d1..a1194e6d7e 100644
--- a/tools/api-builder/angular.io-package/index.js
+++ b/tools/api-builder/angular.io-package/index.js
@@ -1,3 +1,4 @@
+var fs = require('fs');
 var path = require('canonical-path');
 var Package = require('dgeni').Package;
 var basePackage = require('../docs-package');
@@ -40,6 +41,21 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
 
 .config(function(readTypeScriptModules, writeFilesProcessor, readFilesProcessor) {
 
+  var angular_repo_path =  path.resolve(__dirname, '../../../../angular');
+  // confirm that the angular repo is actually there.
+  if (!fs.existsSync(angular_repo_path)) {
+    throw new Error('build-api-docs task requires the angular2 repo to be at ' + angular_repo_path);
+  }
+  readTypeScriptModules.basePath = path.resolve(angular_repo_path, 'modules');
+  readTypeScriptModules.ignoreExportsMatching = [
+    '___esModule',
+    '___core_private_types__',
+    '___platform_browser_private__',
+    '___compiler_private__',
+    '__core_private__',
+    '___core_private__'
+  ];
+
   readTypeScriptModules.sourceFiles = [
     '@angular/common/index.ts',
     '@angular/common/testing.ts',
@@ -61,6 +77,7 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
   ];
   readTypeScriptModules.hidePrivateMembers = true;
 
+
   readFilesProcessor.basePath = DOCS_PATH;
   readFilesProcessor.sourceFiles = [{
     basePath: ANGULAR2_DOCS_PATH,
diff --git a/tools/api-builder/angular.io-package/templates/class.template.html b/tools/api-builder/angular.io-package/templates/class.template.html
index 7390604888..016ce47923 100644
--- a/tools/api-builder/angular.io-package/templates/class.template.html
+++ b/tools/api-builder/angular.io-package/templates/class.template.html
@@ -159,7 +159,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
   {% endif %}{% endfor %}
 {% endif %}
 
-.p(class="location-badge")
+p(class="location-badge").
   exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
   defined in {$ githubViewLink(doc) $}
 
diff --git a/tools/api-builder/angular.io-package/templates/lib/githubLinks.html b/tools/api-builder/angular.io-package/templates/lib/githubLinks.html
index 611ebdb13a..4bf27cd15c 100644
--- a/tools/api-builder/angular.io-package/templates/lib/githubLinks.html
+++ b/tools/api-builder/angular.io-package/templates/lib/githubLinks.html
@@ -1,7 +1,7 @@
 {% macro githubHref(doc) -%}
-https://github.com/{$ versionInfo.gitRepoInfo.owner $}/{$ versionInfo.gitRepoInfo.repo $}/tree/{$ versionInfo.currentVersion.isSnapshot and versionInfo.currentVersion.SHA or versionInfo.currentVersion.raw $}/modules/{$ doc.fileInfo.relativePath $}#L{$ doc.location.start.line+1 $}-L{$ doc.location.end.line+1 $}
+https://github.com/{$ versionInfo.gitRepoInfo.owner $}/{$ versionInfo.gitRepoInfo.repo $}/tree/{$ versionInfo.currentVersion.isSnapshot and versionInfo.currentVersion.SHA or versionInfo.currentVersion.raw $}/modules/{$ doc.fileInfo.projectRelativePath $}#L{$ doc.location.start.line+1 $}-L{$ doc.location.end.line+1 $}
 {%- endmacro %}
 
 {% macro githubViewLink(doc) -%}
-  <a href="{$ githubHref(doc) $}">{$ doc.fileInfo.relativePath $} (line {$ doc.location.start.line+1 $})</a>
-{%- endmacro -%}
+  <a href="{$ githubHref(doc) $}">{$ doc.fileInfo.projectRelativePath $} (line {$ doc.location.start.line+1 $})</a>
+{%- endmacro %}
\ No newline at end of file
diff --git a/tools/api-builder/docs-package/index.js b/tools/api-builder/docs-package/index.js
index 047ef45ad6..5988639330 100644
--- a/tools/api-builder/docs-package/index.js
+++ b/tools/api-builder/docs-package/index.js
@@ -5,7 +5,6 @@ var typescriptPackage = require('dgeni-packages/typescript');
 var linksPackage = require('../links-package');
 var gitPackage = require('dgeni-packages/git');
 var path = require('canonical-path');
-var fs = require('fs');
 
 // Define the dgeni package for generating the docs
 module.exports = new Package('angular-v2-docs', [jsdocPackage, nunjucksPackage, typescriptPackage, linksPackage, gitPackage])
@@ -36,29 +35,6 @@ module.exports = new Package('angular-v2-docs', [jsdocPackage, nunjucksPackage,
   renderDocsProcessor.extraData.versionInfo = versionInfo;
 })
 
-// Configure file reading
-.config(function(readTypeScriptModules) {
-
-  var angular_repo_path =  path.resolve(__dirname, '../../../../angular');
-  // confirm that the angular repo is actually there.
-  if (!fs.existsSync(angular_repo_path)) {
-    throw new Error('build-api-docs task requires the angular2 repo to be at ' + angular_repo_path);
-  }
-  readTypeScriptModules.sourceFiles = [
-    '*/*.@(js|es6|ts)',
-    '*/src/**/*.@(js|es6|ts)'
-  ];
-  readTypeScriptModules.basePath = path.resolve(angular_repo_path, 'modules');
-  readTypeScriptModules.ignoreExportsMatching = [
-    '___esModule',
-    '___core_private_types__',
-    '___platform_browser_private__',
-    '___compiler_private__',
-    '__core_private__',
-    '___core_private__'
-  ];
-})
-
 
 .config(function(parseTagsProcessor, getInjectables) {
   // We actually don't want to parse param docs in this package as we are getting the data out using TS
diff --git a/tools/plunker-builder/indexHtmlTranslator.js b/tools/plunker-builder/indexHtmlTranslator.js
index 05be3a90f2..321cadf915 100644
--- a/tools/plunker-builder/indexHtmlTranslator.js
+++ b/tools/plunker-builder/indexHtmlTranslator.js
@@ -18,6 +18,14 @@ var _rxRules = {
   link: {
     from: '/<link rel="stylesheet" href=".*%tag%".*>/',
     to: '<link rel="stylesheet" href="%tag%">'
+  },
+  system_extra_main: {
+    from: /main:\s*[\'|\"]index.js[\'|\"]/,
+    to: 'main: "index.ts"'
+  },
+  system_extra_defaultExtension: {
+    from: /defaultExtension:\s*[\'|\"]js[\'|\"]/,
+    to: 'defaultExtension: "ts"'
   }
 };
 
@@ -27,8 +35,8 @@ var _rxData = [
   },
   {
     pattern: 'script',
-    from: 'node_modules/es6-shim/es6-shim.min.js',
-    to:   'https://npmcdn.com/es6-shim@0.35.0/es6-shim.min.js'
+    from: 'node_modules/core-js/client/shim.min.js',
+    to:   'https://npmcdn.com/core-js/client/shim.min.js'
   },
   {
     pattern: 'script',
@@ -62,6 +70,12 @@ var _rxData = [
   },
   {
     pattern: 'angular_pkg',
+  },
+  {
+    pattern: 'system_extra_main'
+  },
+  {
+    pattern: 'system_extra_defaultExtension'
   }
 ];