From 3d992384c3fd80ec2778183a6c77313da977b554 Mon Sep 17 00:00:00 2001
From: Ward Bell <wardbell@hotmail.com>
Date: Thu, 11 Feb 2016 15:08:06 -0800
Subject: [PATCH] chore(devguide/ts): to beta.6 + typings + related doc updates

---
 gulpfile.js                                   |  23 ++-
 public/docs/_examples/.gitignore              |   1 +
 .../homepage-hello-world/ts/index.1.html      |   6 +-
 .../_examples/homepage-tabs/ts/index.1.html   |   6 +-
 .../_examples/homepage-todo/ts/index.1.html   |   6 +-
 public/docs/_examples/package.json            |  25 +--
 .../_examples/quickstart/js/package.1.json    |   4 +-
 .../docs/_examples/quickstart/ts/app/main.ts  |   1 -
 .../_examples/quickstart/ts/package.1.json    |  13 +-
 .../_examples/quickstart/ts/tsconfig.1.json   |   4 +-
 .../_examples/quickstart/ts/typings.1.json    |   5 +
 public/docs/_examples/tsconfig.json           |   4 +-
 public/docs/_examples/typings.json            |   6 +
 public/docs/js/latest/guide/forms.jade        |   6 +-
 public/docs/ts/latest/guide/forms.jade        |   7 +-
 public/docs/ts/latest/guide/router.jade       |  29 ++--
 .../ts/latest/guide/server-communication.jade |   2 +-
 public/docs/ts/latest/quickstart.jade         | 163 ++++++++++++++----
 .../ts/latest/testing/first-app-tests.jade    |  14 +-
 public/docs/ts/latest/tutorial/toh-pt1.jade   |   4 +-
 public/docs/ts/latest/tutorial/toh-pt2.jade   |   4 +-
 public/docs/ts/latest/tutorial/toh-pt3.jade   |  10 +-
 public/docs/ts/latest/tutorial/toh-pt4.jade   |  10 +-
 public/docs/ts/latest/tutorial/toh-pt5.jade   |   9 +-
 tools/plunker-builder/indexHtmlTranslator.js  |  18 +-
 tools/plunker-builder/plunkerBuilder.js       |   1 +
 26 files changed, 275 insertions(+), 106 deletions(-)
 create mode 100644 public/docs/_examples/quickstart/ts/typings.1.json
 create mode 100644 public/docs/_examples/typings.json

diff --git a/gulpfile.js b/gulpfile.js
index 5f2f94aa3a..cf1967eb06 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -66,7 +66,7 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
   return new Minimatch(excludePattern)
 });
 
-var _exampleBoilerplateFiles = ['package.json', 'tsconfig.json', 'karma.conf.js', 'karma-test-shim.js' ];
+var _exampleBoilerplateFiles = ['package.json', 'tsconfig.json', 'typings.json', 'karma.conf.js', 'karma-test-shim.js' ];
 
 // --filter may be passed in to filter/select _example app subdir names
 // i.e. gulp run-e2e-tests --filter=foo  ; would select all example apps with
@@ -232,6 +232,14 @@ gulp.task('add-example-boilerplate', function() {
     gutil.log("symlinking " + linkPath + ' -> ' + realPath)
     fsUtils.addSymlink(realPath, linkPath);
   });
+  
+  realPath = path.join(EXAMPLES_PATH, '/typings');
+  var typingsPaths = getTypingsPaths(EXAMPLES_PATH);
+  typingsPaths.forEach(function(linkPath) {
+    gutil.log("symlinking " + linkPath + ' -> ' + realPath)    
+    fsUtils.addSymlink(realPath, linkPath);
+  });
+  
   copyExampleBoilerplate();
 });
 
@@ -257,6 +265,12 @@ gulp.task('remove-example-boilerplate', function() {
   nodeModulesPaths.forEach(function(linkPath) {
     fsUtils.removeSymlink(linkPath);
   });
+  
+  var typingsPaths = getTypingsPaths(EXAMPLES_PATH);
+  typingsPaths.forEach(function(linkPath) {
+    fsUtils.removeSymlink(linkPath);
+  });  
+  
   var examplePaths = getExamplePaths(EXAMPLES_PATH);
   return deleteFiles(_exampleBoilerplateFiles, examplePaths).then(function() {
     var e2eSpecPaths = getE2eSpecPaths(EXAMPLES_PATH);
@@ -507,6 +521,13 @@ function getNodeModulesPaths(basePath) {
   return paths;
 }
 
+function getTypingsPaths(basePath) {
+  var paths = getExamplePaths(basePath).map(function(examplePath) {
+    return path.join(examplePath, "/typings");
+  });
+  return paths;
+}
+
 function getExamplePaths(basePath, includeBase) {
   // includeBase defaults to false
   return getPaths(basePath, "example-config.json", includeBase)
diff --git a/public/docs/_examples/.gitignore b/public/docs/_examples/.gitignore
index 816d48cb07..d9583fccca 100644
--- a/public/docs/_examples/.gitignore
+++ b/public/docs/_examples/.gitignore
@@ -1,4 +1,5 @@
 typings
+typings.json
 *.js.map
 package.json
 karma.conf.js
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 f62ef90bba..b149e15cc9 100644
--- a/public/docs/_examples/homepage-hello-world/ts/index.1.html
+++ b/public/docs/_examples/homepage-hello-world/ts/index.1.html
@@ -12,9 +12,9 @@
 
     <script src="https://code.angularjs.org/tools/system.js"></script>
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script>
diff --git a/public/docs/_examples/homepage-tabs/ts/index.1.html b/public/docs/_examples/homepage-tabs/ts/index.1.html
index 1e833d76c0..ae8ac2c835 100644
--- a/public/docs/_examples/homepage-tabs/ts/index.1.html
+++ b/public/docs/_examples/homepage-tabs/ts/index.1.html
@@ -14,9 +14,9 @@
     
     <script src="https://code.angularjs.org/tools/system.js"></script>
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script>
diff --git a/public/docs/_examples/homepage-todo/ts/index.1.html b/public/docs/_examples/homepage-todo/ts/index.1.html
index fa0a04c5ef..75b3f48ef6 100644
--- a/public/docs/_examples/homepage-todo/ts/index.1.html
+++ b/public/docs/_examples/homepage-todo/ts/index.1.html
@@ -14,9 +14,9 @@
     
     <script src="https://code.angularjs.org/tools/system.js"></script>
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
-    <script src="https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
 
     <!-- 2. Configure SystemJS -->
     <script>
diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json
index 93fb802981..a52a25f899 100644
--- a/public/docs/_examples/package.json
+++ b/public/docs/_examples/package.json
@@ -4,6 +4,7 @@
   "description": "Master package.json, the superset of all dependencies for all of the _example package.json files.",
   "main": "index.js",
   "scripts": {
+    "postinstall": "npm run typings install",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "lite": "lite-server",
@@ -11,21 +12,22 @@
     "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
     "test": "karma start karma.conf.js",
     "build-and-test": "npm run tsc && npm run test",
-    "http-server": "tsc && http-server"
+    "http-server": "tsc && http-server",
+    "typings" : "typings"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.3",
-    "systemjs": "0.19.6",
+    "angular2": "2.0.0-beta.6",
+    "systemjs": "0.19.20",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
-    "zone.js": "0.5.11",
+    "zone.js": "0.5.14",
     
-    "a2-in-memory-web-api": "^0.1.2",
+    "a2-in-memory-web-api": "^0.1.5",
     "bootstrap": "^3.3.6"
 
   },
@@ -33,15 +35,16 @@
     "concurrently": "^1.0.0",
     "http-server": "^0.8.5",
     "jasmine-core": "~2.4.1",
-    "karma": "^0.12.23",
-    "karma-chrome-launcher": "^0.1.4",
-    "karma-cli": "^0.0.4",
-    "karma-jasmine": "^0.3.6",
+    "karma": "^0.13.19",
+    "karma-chrome-launcher": "^0.2.2",
+    "karma-cli": "^0.1.2",
+    "karma-jasmine": "^0.3.7",
     "lite-server": "^2.0.1",
     "live-server": "^0.9.1",
-    "protractor": "^3.0.0",
+    "protractor": "^3.1.1",
     "rimraf": "^2.5.1",
-    "typescript": "^1.7.5"
+    "typescript": "^1.7.5",
+    "typings":"0.6.8"
   },
   "repository": {  }
 }
diff --git a/public/docs/_examples/quickstart/js/package.1.json b/public/docs/_examples/quickstart/js/package.1.json
index bba71c461b..d72a7f6c10 100644
--- a/public/docs/_examples/quickstart/js/package.1.json
+++ b/public/docs/_examples/quickstart/js/package.1.json
@@ -7,12 +7,12 @@
   },
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.3",
+    "angular2": "2.0.0-beta.6",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
-    "zone.js": "0.5.11"
+    "zone.js": "0.5.14"
   },
   "devDependencies": {
     "concurrently": "^1.0.0",
diff --git a/public/docs/_examples/quickstart/ts/app/main.ts b/public/docs/_examples/quickstart/ts/app/main.ts
index f95542f1a7..effe7c896f 100644
--- a/public/docs/_examples/quickstart/ts/app/main.ts
+++ b/public/docs/_examples/quickstart/ts/app/main.ts
@@ -1,5 +1,4 @@
 // #docregion
-///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
 import {bootstrap}    from 'angular2/platform/browser'
 // #docregion app-component
 import {AppComponent} from './app.component'
diff --git a/public/docs/_examples/quickstart/ts/package.1.json b/public/docs/_examples/quickstart/ts/package.1.json
index d38008214c..a647798983 100644
--- a/public/docs/_examples/quickstart/ts/package.1.json
+++ b/public/docs/_examples/quickstart/ts/package.1.json
@@ -2,24 +2,27 @@
   "name": "angular2-quickstart",
   "version": "1.0.0",
   "scripts": {
+    "postinstall": "npm run typings install",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "lite": "lite-server",
-    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
+    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
+    "typings" : "typings"
   },
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.3",
-    "systemjs": "0.19.6",
+    "angular2": "2.0.0-beta.6",
+    "systemjs": "0.19.20",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
-    "zone.js": "0.5.11"
+    "zone.js": "0.5.14"
   },
   "devDependencies": {
     "concurrently": "^1.0.0",
     "lite-server": "^2.0.1",
-    "typescript": "^1.7.5"
+    "typescript": "^1.7.5",
+    "typings":"^0.6.8"
   }
 }
diff --git a/public/docs/_examples/quickstart/ts/tsconfig.1.json b/public/docs/_examples/quickstart/ts/tsconfig.1.json
index 77b8221482..9be71e4c6e 100644
--- a/public/docs/_examples/quickstart/ts/tsconfig.1.json
+++ b/public/docs/_examples/quickstart/ts/tsconfig.1.json
@@ -10,6 +10,8 @@
     "noImplicitAny": false
   },
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "typings/main",
+    "typings/main.d.ts"
   ]
 }
diff --git a/public/docs/_examples/quickstart/ts/typings.1.json b/public/docs/_examples/quickstart/ts/typings.1.json
new file mode 100644
index 0000000000..9b5a17f67c
--- /dev/null
+++ b/public/docs/_examples/quickstart/ts/typings.1.json
@@ -0,0 +1,5 @@
+{
+  "ambientDependencies": {
+    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
+  }
+}
\ No newline at end of file
diff --git a/public/docs/_examples/tsconfig.json b/public/docs/_examples/tsconfig.json
index 7fdfcb67b7..6ee6719cb3 100644
--- a/public/docs/_examples/tsconfig.json
+++ b/public/docs/_examples/tsconfig.json
@@ -11,6 +11,8 @@
     "suppressImplicitAnyIndexErrors": true
   },
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "typings/main",
+    "typings/main.d.ts"
   ]
 }
diff --git a/public/docs/_examples/typings.json b/public/docs/_examples/typings.json
new file mode 100644
index 0000000000..bc20ab8607
--- /dev/null
+++ b/public/docs/_examples/typings.json
@@ -0,0 +1,6 @@
+{
+  "ambientDependencies": {
+    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2",
+    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#dd638012d63e069f2c99d06ef4dcc9616a943ee4"
+  }
+}
diff --git a/public/docs/js/latest/guide/forms.jade b/public/docs/js/latest/guide/forms.jade
index 9d54d75d80..fab4cb8f1e 100644
--- a/public/docs/js/latest/guide/forms.jade
+++ b/public/docs/js/latest/guide/forms.jade
@@ -608,7 +608,6 @@ figure.image-display
 .filetree
   .file angular2-forms
   .children
-    .file node_modules
     .file app
     .children
       .file app.component.js
@@ -616,9 +615,12 @@ figure.image-display
       .file hero-form.component.html
       .file hero-form.component.js
       .file main.ts
+    .file node_modules ...
+    .file typings ...      
     .file index.html
     .file package.json
-    .file styles.cs    
+    .file tsconfig.json
+    .file typings.json
 :marked
   Here’s the final version of the source:
 
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index 56baac914e..f96a8049b2 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -668,7 +668,6 @@ figure.image-display
 .filetree
   .file angular2-forms
   .children
-    .file node_modules
     .file app
     .children
       .file app.component.ts
@@ -676,10 +675,12 @@ figure.image-display
       .file hero-form.component.html
       .file hero-form.component.ts
       .file main.ts
+    .file node_modules ...
+    .file typings ...      
     .file index.html
     .file package.json
-    .file styles.css    
-    .file tsconfig.json  
+    .file tsconfig.json
+    .file typings.json
 :marked
   Here’s the final version of the source:
 
diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade
index 09c8ac4ae3..6226d2e781 100644
--- a/public/docs/ts/latest/guide/router.jade
+++ b/public/docs/ts/latest/guide/router.jade
@@ -432,19 +432,20 @@ figure.image-display
   Our starter app's structure looks like this:
 .filetree
   .file router-sample
-  .children
-    .file node_modules
   .children
     .file app
       .children
         .file app.component.ts
         .file crisis-list.component.ts
         .file hero-list.component.ts
-        .file main.ts        
+        .file main.ts
+    .file node_modules ...
+    .file typings ...
     .file index.html
+    .file package.json
     .file styles.css
     .file tsconfig.json
-    .file package.json
+    .file typings.json
 :marked
   Here are the files discussed in this milestone
 +makeTabs(
@@ -654,7 +655,6 @@ code-example(format="." language="bash").
 .filetree
   .file router-sample
   .children
-    .file node_modules
     .file app
     .children
       .file heroes
@@ -663,12 +663,15 @@ code-example(format="." language="bash").
         .file crisis-list.component.ts
         .file hero-detail.component.ts
         .file hero-list.component.ts
-        .file hero.service.ts        
-        .file main.ts        
-      .file index.html
-      .file styles.css
-      .file tsconfig.json
-      .file package.json
+        .file hero.service.ts
+        .file main.ts
+    .file node_modules ...
+    .file typings ...
+    .file index.html
+    .file package.json
+    .file styles.css
+    .file tsconfig.json
+    .file typings.json
 :marked
   <a id="heroes-app-code"></a>
   ### The Heroes App code
@@ -1184,7 +1187,6 @@ code-example(format="." language="bash").
 .filetree
   .file router-sample
   .children
-    .file node_modules
     .file app
     .children
       .file crisis-center/...
@@ -1192,10 +1194,13 @@ code-example(format="." language="bash").
       .file app.component.ts
       .file dialog.service.ts
       .file main.ts      
+    .file node_modules ...
+    .file typings ...
     .file index.html
     .file package.json
     .file styles.css
     .file tsconfig.json
+    .file typings.json
 :marked
   The top level application files are
 +makeTabs(
diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade
index 2eed334a1f..e2c2b4a176 100644
--- a/public/docs/ts/latest/guide/server-communication.jade
+++ b/public/docs/ts/latest/guide/server-communication.jade
@@ -464,7 +464,7 @@ figure.image-display
 .l-sub-section
   :marked
     We often use the [async pipe](pipes.html#async-pipe) in read-only components where the component has no need to interact with the data.
-    We couldn't us the pipe in the `HeroListComponent` because the "add hero" feature pushes newly created heroes into the list.
+    We couldn't use the pipe in the `HeroListComponent` because the "add hero" feature pushes newly created heroes into the list.
 
 :marked
   ## Our wasteful app
diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade
index 4751f1473f..2d2968d8c6 100644
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@@ -56,14 +56,37 @@ figure.image-display
 :marked
   ## Development Environment
   
-  We'll need a place to stand (the application project folder), some libraries, 
-  some TypeScript configuration and the TypeScript-aware editor of your choice.
+  We'll need a place to stand (the application project folder),
+  some TypeScript configuration, and some libraries for development and runtime.
 
   ### Create a new project folder
   
 code-example(format="").
   mkdir angular2-quickstart
   cd    angular2-quickstart
+:marked
+  ### Configure TypeScript
+
+  We must guide the TypeScript compiler with very specific settings.
+  
+  Add a **tsconfig.json** file to the project folder and copy/paste the following:
++makeJson('quickstart/ts/tsconfig.1.json', null, 'tsconfig.json')(format=".")
+.l-sub-section
+  :marked
+   We explore the `tsconfig.json` in an [appendix below](#tsconfig)
+:marked
+  ### TypeScript Typings
+
+  Many JavaScript libraries extend the JavaScript environment with features and syntax
+  that the TypeScript compiler doesn't recognize natively. We teach it about these capabilities with
+  [TypeScript type definition files](http://www.typescriptlang.org/Handbook#writing-dts-files)
+  &mdash; *d.ts files* &mdash; which we identify in a `typings.json` file.
+  
+  Add a **typings.json** file to the project folder and copy/paste the following:
++makeJson('quickstart/ts/typings.1.json', null, 'typings.json')(format=".")
+.l-sub-section
+  :marked
+   We go a little deeper into *typings* in an [appendix below](#typings)
 :marked
   ### Add the libraries we need
   
@@ -91,16 +114,6 @@ code-example(format="").
   :marked
     Scary <span style="color:red; font-weight: bold">error messages in red</span> may appear **during** install. 
     Ignore them. The install will succeed. See the [appendix below](#npm-errors) for more information.
-:marked
-  ### Configure TypeScript
-
-  We must guide the TypeScript compiler with very specific settings.
-  
-  Add a **tsconfig.json** file to the project folder and copy/paste the following:
-+makeJson('quickstart/ts/tsconfig.1.json', null, 'tsconfig.json')(format=".")
-.l-sub-section
-  :marked
-   We explore the `tsconfig.json` in an [appendix below](#tsconfig)
 :marked
   **We're all set.** Let's write some code.
 
@@ -210,8 +223,6 @@ code-example(format="").
   We import both. Then we call `bootstrap`, passing in the **root component type**, 
   `AppComponent`.
 
-  The `<reference>` tag tells TypeScript how to find the typings for browser shims used by Angular.
-
 .l-sub-section
   :marked
     Learn why we import `bootstrap` from `angular2/platform/browser`
@@ -295,14 +306,16 @@ figure.image-display
 .filetree
   .file angular2-quickstart
   .children
-    .file node_modules
     .file app
     .children
       .file app.component.ts
       .file main.ts
+    .file node_modules ...
+    .file typings ...
     .file index.html
     .file package.json
     .file tsconfig.json
+    .file typings.json
 :marked
   And here are the files:
 +makeTabs(`
@@ -310,9 +323,10 @@ figure.image-display
     quickstart/ts/app/main.ts,
     quickstart/ts/index.html,
     quickstart/ts/package.1.json,
-    quickstart/ts/tsconfig.1.json
+    quickstart/ts/tsconfig.1.json,
+    quickstart/ts/typings.1.json
   `,null,
-  `app/app.component.ts, app/main.ts, index.html,package.json, tsconfig.json`)
+  `app/app.component.ts, app/main.ts, index.html,package.json, tsconfig.json, typings.json`)
 :marked
 
 .l-main-section
@@ -349,7 +363,7 @@ figure.image-display
 <a id="libraries"></a>
 .l-main-section
 :marked
-  ### Appendix: Libraries
+  ## Appendix: Libraries
   We loaded the following scripts
 +makeExample('quickstart/ts/index.html', 'libraries', 'index.html')(format=".")
 :marked
@@ -382,7 +396,7 @@ figure.image-display
 .l-main-section
 :marked
   <a id="package-json"></a>
-  ### Appendix: package.json
+  ## Appendix: package.json
 
   [npm](https://docs.npmjs.com/) is a popular package manager and Angular application developers rely on it
   to acquire and manage the libraries their apps require.
@@ -425,7 +439,7 @@ code-example(format="").
 .l-main-section
 :marked
   <a id="npm-errors"></a>
-  ### Appendix: Npm errors and warnings
+  ## Appendix: Npm errors and warnings
   
   All is well if there are no console messages starting with `npm ERR!` *at the end* of **npm install**. 
   There might be a few `npm WARN` messages along the way &mdash; and that is perfectly fine.
@@ -441,7 +455,7 @@ code-example(format="").
 .l-main-section
 :marked
   <a id="tsconfig"></a>
-  ### Appendix: TypeScript configuration
+  ## Appendix: TypeScript configuration
   We added a TypeScript configuration file (`tsconfig.json`) to our project to
   guide the compiler as it generates JavaScript files.
   Get details about `tsconfig.json` from the official
@@ -478,10 +492,99 @@ code-example(format="").
   "suppressImplicitAnyIndexErrors":true
   ```
 
+
+<a id="typings"></a>
+.l-main-section
+:marked
+  ## Appendix: TypeScript Typings
+  Many libraries such as jQuery, the Jasmine testing library, and Angular itself,
+  add material to the JavaScript environment that the TypeScript compiler doesn't recognize.
+  When the compiler doesn't recognize something, it throws an error. 
+  
+  We use [TypeScript type definition files](http://www.typescriptlang.org/Handbook#writing-dts-files)
+  &mdash; *d.ts files* &mdash; to tell the compiler about the libraries we load.
+  
+  TypeScript-aware editors leverage these same definition files to display type information about library features.
+  
+  Many libraries include their definition files in their npm packages where both the TypeScript compiler and editors
+  can find them. Angular is one such library. 
+  Peek into the `node_modules/angular2/` folder to see several `...d.ts` files that describe parts of Angular.
+  
+  **We do nothing to get *typings* files for library packages with bundled *d.ts* files.**
+  
+  Sadly, many libraries &mdash; jQuery, Jasmine, and Lodash among them &mdash; do *not* include `d.ts` files in their npm packages.
+  Fortunately, either their authors or community contributors have created separate *d.ts* files for these libraries and 
+  published them in well-known locations.
+  The *typings* tool can find and fetch these files for us.
+  
+  We installed the [typings](https://github.com/typings/typings/blob/master/README.md) tool 
+  with npm (find it in the `package.json`) and added an npm script
+  to run that tool automatically after *npm* installation completes.
++makeJson('quickstart/ts/package.1.json', {paths: 'scripts.postinstall'}, 'tsconfig.json (postinstall)')(format=".")
+:marked
+  This *typings* tool command installs the *d.ts* files that we identified in `typings.json`:
++makeJson('quickstart/ts/typings.1.json', null, 'typings.json')(format=".")
+:marked
+  We identified only one *typings* file in this QuickStart, the *d.ts* file for 
+  [es6-shim](https://github.com/paulmillr/es6-shim/blob/master/README.md) that brings ES2015/ES6
+  capabilities to our ES5 browsers. 
+  QuickStart itself doesn't need this shim but many of the documentation samples do
+  and most of us would be disappointed if typical ES2015 features didn't work out-of-the-box.
+
+  We can also run the *typings* tool ourselves. The following command lists the locally installed typings files.
+code-example(format="").
+  npm run typings list
+:marked
+    The following command installs the typings file for the Jasmine test library and updates the `typings.config` 
+    so we that we get it automatically the next time.
+code-example(format="").
+  npm run typings install -- jasmine --ambient --save
+.l-sub-section
+  :marked
+    Learn about the features of the *typings* tool at its [site on github](https://github.com/typings/typings/blob/master/README.md).
+:marked
+  #### Typing file collisions
+  
+  The TypeScript compiler does not tolerate redefinition of a type. For example, it throws an error if it's given two definitions for
+  the `Promise` type.
+  
+  Double definitions are common. In fact, the `typings` tool deliberately creates
+  duplicate sets of typings (for reasons best explained elsewhere). 
+  Look in the project structure for the *typings folder* where we should find something like:
+.filetree
+  .file typings
+  .children
+    .file browser
+    .children
+      .file ambient
+        .children
+          .file es6-shim
+          .children
+            .file es6-shim.d.ts
+  .children
+    .file main
+    .children
+      .file ambient
+        .children
+          .file es6-shim
+          .children
+            .file es6-shim.d.ts          
+  .children
+     .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.
+  
+  We must tell the compiler to ignore one or the other. 
+  We removed the `main` set from consideration in the `exclude` section of our `tsconfig.json` file:
++makeJson('quickstart/ts/tsconfig.1.json', {paths: 'exclude'}, 'tsconfig.json (exclude)')(format=".")
+:marked
+
+
 .l-main-section
 :marked
   <a id="systemjs"></a>
-  ### Appendix: SystemJS Configuration
+  ## Appendix: SystemJS Configuration
   
   The QuickStart uses [SystemJS](https://github.com/systemjs/systemjs) to load application
   and library modules. 
@@ -544,9 +647,9 @@ code-example(format="").
 .l-main-section
 :marked
   <a id="main"></a>
-  ### Appendix: ***main.ts***
+  ## Appendix: **main.ts**
 
-  #### Bootstrapping is platform-specific
+  ### Bootstrapping is platform-specific
   We import the `bootstrap` function from `angular2/platform/browser`,
   not `angular2/core`. There's a good reason.
   
@@ -564,7 +667,7 @@ code-example(format="").
 
   These targets require a different kind of bootstrap function that we'd import from a different library.
  
-  #### Why do we create a separate ***main.ts*** file?
+  ### Why do we create a separate ***main.ts*** file?
   
   The *main.ts* file is tiny. This is just a QuickStart.
   We could have folded its few lines into the `app.component` file
@@ -577,14 +680,14 @@ code-example(format="").
   1. Separation of concerns
   1. We learned about import and export
   
-  #### It's easy
+  ### It's easy
   Sure it's an extra step and an extra file. How hard is that in the scheme of things?
   
   We'll see that a separate `main.ts` is beneficial for *most* apps 
   even if it isn't critical for the QuickStart.
   Let's develop good habits now while the cost is low.
   
-  #### Testability
+  ### Testability
   We should be thinking about testability from the beginning
   even if we know we'll never test the QuickStart. 
   
@@ -597,21 +700,21 @@ code-example(format="").
   Relocating the `bootstrap` function to `main.ts` eliminates this spurious error
   and leaves us with a clean component module file.
   
-  #### Reusability
+  ### Reusability
   We refactor, rename, and relocate files as our application evolves.
   We can't do any of those things while the file calls `bootstrap`.
   We can't move it. 
   We can't reuse the component in another application. 
   We can't pre-render the component on the server for better performance.
   
-  #### Separation of concerns
+  ### Separation of concerns
   A component's responsibility is to present and manage a view.
   
   Launching the application has nothing to do with view management.
   That's a separate concern. The friction we're encountering in testing and reuse
   stems from this unnecessary mix of responsibilities.
   
-  #### Import/Export
+  ### Import/Export
   
   While writing a separate `main.ts` file we learned an essential Angular skill:
   how to export from one module and import into another. 
diff --git a/public/docs/ts/latest/testing/first-app-tests.jade b/public/docs/ts/latest/testing/first-app-tests.jade
index 9ca50e675b..5e2187405d 100644
--- a/public/docs/ts/latest/testing/first-app-tests.jade
+++ b/public/docs/ts/latest/testing/first-app-tests.jade
@@ -6,7 +6,7 @@ include ../../../../_includes/_util-fns
   - to test one of our application classes
   - why we prefer our test files to be next to their corresponding source files
   - to run tests with an `npm` command
-  - load the test file with systemJS
+  - load the test file with SystemJS
 
 .callout.is-helpful
   header Prior Knowledge
@@ -240,7 +240,7 @@ code-example(format="" language="html").
 
 .l-main-section
 :marked
-  ## Load tests with systemjs
+  ## Load tests with SystemJS
 
   The immediate cause of the error is the `export` statement in `hero.ts`.
   That error was there all along.
@@ -254,8 +254,8 @@ code-example(format="" language="html").
 
   We add module loading support in four steps:
 
-  1. add the *systemjs* module management library
-  1. configure *systemjs* to look for JavaScript files by default
+  1. add the *SystemJS* module management library
+  1. configure *SystemJS* to look for JavaScript files by default
   1. import our test files
   1. tell Jasmine to run the imported tests
 
@@ -268,7 +268,7 @@ code-example(format="" language="html").
     <script src="../node_modules/systemjs/dist/system.src.js"></script>
 
     <script>
-      // #2. Configure systemjs to use the .js extension
+      // #2. Configure SystemJS to use the .js extension
       //     for imports from the app folder
       System.config({
         packages: {
@@ -304,7 +304,7 @@ figure.image-display
   Without that default, it would translate an import statement such as `import {Hero} from './hero'` to a request for the file named `hero`.
   Not `hero.js`. Just plain `hero`.  Our server error with "404 - not found" because it doesn't have a file of that name.
 
-  Once configured with a default extension of 'js',&nbsp;  Systemjs requests `hero.js` which *does* exist and is promptly returned by our server.
+  Once configured with a default extension of 'js',&nbsp;  SystemJS requests `hero.js` which *does* exist and is promptly returned by our server.
 
   ### Asynchronous System.import
   The call to `System.import` shouldn't surprise us but it's asynchronous nature might.
@@ -319,7 +319,7 @@ figure.image-display
   The browser raises the `load` event when it finishes loading all scripts.
 
   But we're not loading test scripts inline anymore.
-  We're using the systemjs module loader and it won't be done until long after the browser raised the `load` event.
+  We're using the SystemJS module loader and it won't be done until long after the browser raised the `load` event.
   Meanwhile, Jasmine started and ran to completion … with no tests to evaluate … before the import completed.
 
   So we must wait until the import completes and only then call the window `onLoad` handler.
diff --git a/public/docs/ts/latest/tutorial/toh-pt1.jade b/public/docs/ts/latest/tutorial/toh-pt1.jade
index e0e961d074..99023654ad 100644
--- a/public/docs/ts/latest/tutorial/toh-pt1.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt1.jade
@@ -16,14 +16,16 @@ include ../../../../_includes/_util-fns
 .filetree
   .file angular2-tour-of-heroes
   .children
-    .file node_modules
     .file app
     .children
       .file app.component.ts
       .file main.ts
+    .file node_modules ...
+    .file typings ...      
     .file index.html
     .file package.json
     .file tsconfig.json
+    .file typings.json
 :marked
   ## Keep the app transpiling and running
   We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
diff --git a/public/docs/ts/latest/tutorial/toh-pt2.jade b/public/docs/ts/latest/tutorial/toh-pt2.jade
index c6b340efa3..647aaf0393 100644
--- a/public/docs/ts/latest/tutorial/toh-pt2.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt2.jade
@@ -22,14 +22,16 @@ include ../../../../_includes/_util-fns
 .filetree
   .file angular2-tour-of-heroes
   .children
-    .file node_modules
     .file app
     .children
       .file app.component.ts
       .file main.ts
+    .file node_modules ...
+    .file typings ...      
     .file index.html
     .file package.json
     .file tsconfig.json
+    .file typings.json
 :marked
   ### Keep the app transpiling and running
   We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
diff --git a/public/docs/ts/latest/tutorial/toh-pt3.jade b/public/docs/ts/latest/tutorial/toh-pt3.jade
index 84449ae31f..c07145968a 100644
--- a/public/docs/ts/latest/tutorial/toh-pt3.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt3.jade
@@ -14,14 +14,16 @@ include ../../../../_includes/_util-fns
 .filetree
   .file angular2-tour-of-heroes
   .children
-    .file node_modules
     .file app
     .children
       .file app.component.ts
       .file main.ts
+    .file node_modules ...
+    .file typings ...      
     .file index.html
     .file package.json
     .file tsconfig.json
+    .file typings.json
 :marked
   ### Keep the app transpiling and running
   We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing
@@ -206,16 +208,18 @@ code-example(format=".")
 .filetree
   .file angular2-tour-of-heroes
   .children
-    .file node_modules
     .file app
     .children
       .file app.component.ts
       .file hero.ts
       .file hero-detail.component.ts
-      .file main.ts      
+      .file main.ts
+    .file node_modules ...
+    .file typings ...      
     .file index.html
     .file package.json
     .file tsconfig.json
+    .file typings.json
 :marked
   Here are the code files we discussed in this chapter.
 
diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade
index daffd1b6bc..7b1a5e08f5 100644
--- a/public/docs/ts/latest/tutorial/toh-pt4.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt4.jade
@@ -27,16 +27,18 @@ include ../../../../_includes/_util-fns
 .filetree
   .file angular2-tour-of-heroes
   .children
-    .file node_modules
     .file app
     .children
       .file app.component.ts
       .file hero.ts
       .file hero-detail.component.ts
-      .file main.ts      
+      .file main.ts
+    .file node_modules ...
+    .file typings ...      
     .file index.html
     .file package.json
     .file tsconfig.json
+    .file typings.json
 :marked
   ### Keep the app transpiling and running
   Open a terminal/console window. 
@@ -322,7 +324,6 @@ code-example(format="." language="html").
 .filetree
   .file angular2-tour-of-heroes
   .children
-    .file node_modules
     .file app
     .children
       .file app.component.ts
@@ -331,9 +332,12 @@ code-example(format="." language="html").
       .file hero.service.ts
       .file main.ts      
       .file mock-heroes.ts
+    .file node_modules ...
+    .file typings ...      
     .file index.html
     .file package.json
     .file tsconfig.json
+    .file typings.json
 :marked
   Here are the code files we discussed in this chapter.
 
diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade
index e0ee08e1a5..c3c3db083d 100644
--- a/public/docs/ts/latest/tutorial/toh-pt5.jade
+++ b/public/docs/ts/latest/tutorial/toh-pt5.jade
@@ -35,7 +35,6 @@ figure.image-display
 .filetree
   .file angular2-tour-of-heroes
   .children
-    .file node_modules
     .file app
     .children
       .file app.component.ts
@@ -44,9 +43,12 @@ figure.image-display
       .file hero.service.ts
       .file main.ts
       .file mock-heroes.ts
+    .file node_modules ...
+    .file typings ...      
     .file index.html
     .file package.json
     .file tsconfig.json
+    .file typings.json
 :marked
   ### Keep the app transpiling and running
   Open a terminal/console window and enter the following command to
@@ -641,7 +643,6 @@ figure.image-display
 .filetree
   .file angular2-tour-of-heroes
   .children
-    .file node_modules
     .file app
     .children
       .file app.component.ts
@@ -659,10 +660,12 @@ figure.image-display
       .file heroes.component.ts
       .file main.ts
       .file mock-heroes.ts
+    .file node_modules ...
+    .file typings ...      
     .file index.html
     .file package.json
-    .file styles.css
     .file tsconfig.json
+    .file typings.json
 :marked
 
 .l-main-section
diff --git a/tools/plunker-builder/indexHtmlTranslator.js b/tools/plunker-builder/indexHtmlTranslator.js
index 1a9a7af635..3647e53191 100644
--- a/tools/plunker-builder/indexHtmlTranslator.js
+++ b/tools/plunker-builder/indexHtmlTranslator.js
@@ -39,42 +39,42 @@ var _rxData = [
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/angular2.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/angular2-all.umd.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.3/angular2-all.umd.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.6/angular2-all.umd.dev.js'
   },  
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/angular2-polyfills.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/rxjs/bundles/Rx.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.3/Rx.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.6/Rx.js'
   },  
   {
     pattern: 'script',
     from: 'node_modules/rxjs/bundles/Rx.umd.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.3/Rx.umd.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.6/Rx.umd.js'
   },  
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/router.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.3/router.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.6/router.dev.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/http.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.3/http.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.6/http.dev.js'
   },
   {
     pattern: 'script',
     from: 'node_modules/angular2/bundles/testing.dev.js',
-    to: 'https://code.angularjs.org/2.0.0-beta.3/testing.dev.js'
+    to: 'https://code.angularjs.org/2.0.0-beta.6/testing.dev.js'
   },
   {
     pattern: 'script',
@@ -84,7 +84,7 @@ var _rxData = [
   {
     pattern: 'script',
     from: 'node_modules/systemjs/dist/system-polyfills.js',
-    to: 'https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js'
+    to: 'https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js'
   },
   {
     pattern: 'script',
diff --git a/tools/plunker-builder/plunkerBuilder.js b/tools/plunker-builder/plunkerBuilder.js
index 363bcdbc76..cb1c405de9 100644
--- a/tools/plunker-builder/plunkerBuilder.js
+++ b/tools/plunker-builder/plunkerBuilder.js
@@ -109,6 +109,7 @@ function initConfigAndCollectFileNames(configFileName) {
   // var defaultExcludes = [ '!**/node_modules/**','!**/typings/**','!**/tsconfig.json', '!**/*plnkr.json', '!**/*plnkr.html', '!**/*plnkr.no-link.html' ];
   var defaultExcludes = [ 
     '!**/typings/**',
+    '!**/typings.json',
     '!**/tsconfig.json', 
     '!**/*plnkr.*', 
     '!**/package.json',